スキル自身の言葉で
このスキルは、クロスプラットフォームなモバイルアプリケーションを構築するためのReact Nativeスタイリングパターン、React Navigation 6+、Reanimated 3を教えます。スタイリング用のStyleSheetとstyled-components、さまざまな画面サイズに対応するレスポンシブレイアウト、iOSとAndroidのプラットフォーム固有のデザイン、Gesture Handlerによるジェスチャー駆動のインタラクション、パフォーマンス最適化技術を扱います。
このスキルは、UIスレッド上で動作する60fpsアニメーション、適切なナビゲーションの型定義、実機テストの実践により、ネイティブ品質のユーザー体験を作り出すことに重点を置いています。
生成されるもの
- TypeScriptインターフェース、StyleSheet定義、Reanimatedアニメーションを備えたReact Nativeコンポーネント
- 60fpsのパフォーマンスのためにuseSharedValueとuseAnimatedStyleを用いたReanimated 3によるアニメーションコンポーネント
仕組み
- 01StyleSheetでスタイルを設定する
パフォーマンス向上のため、インラインスタイルではなくStyleSheet.createを使用してコンポーネントのスタイルを定義してください。
- 02型付きルートによるナビゲーションの構築
すべてのナビゲーターに対してTypeScriptのParamList型定義を用いたReact Navigation 6+でナビゲーションを実装し、画面間の型安全性を確保してください。
- 03UIスレッドでアニメーションを実行する
UIスレッド上で動作するReanimated 3のworkletを使用して、useSharedValueとuseAnimatedStyleにより60fpsのパフォーマンスを実現する高性能なアニメーションを作成します。
- 04GestureDetectorでジェスチャーを処理する
Gesture Handlerを使用してジェスチャー駆動のインタラクションを実装します。ジェスチャーをGestureDetectorでラップし、simultaneousHandlersで競合を解決します。
- 05レンダリングを最適化する
不要な再レンダリングを防ぐために、React.memoとuseCallbackを使用します。リストには、mapを使ったScrollViewではなく、常にFlatListを使用してください。