mcpField
R
react-native-dev

react-native-dev

github.com/minimax-ai開発13.7k1.9k 回インストール28 週間前に更新
リポジトリ

react-native-dev について

react-native-devは、React NativeとExpoアプリを開発するためのガイドで、アプリの構築や保守を行う開発者向けです。ナビゲーション、UI、状態管理、パフォーマンス、テスト、リリースのパターンと参考資料をまとめています。

主な機能

  1. 01Expo Routerのナビゲーションとルーティングパターン
  2. 02FlashListとexpo-imageの利用指針
  3. 03Zustand、Jotai、React Queryによる状態管理案
  4. 04アニメーション、ジェスチャー、フォームの参考資料
  5. 05パフォーマンス・テスト・リリースのチェックリスト

活用シーン

  1. 01Expo Routerを使う新規アプリをセットアップ
  2. 02長いリストや画像に使うコンポーネントを選定
  3. 03フォーム、ネットワークデータ、状態管理を計画
  4. 04リリース前に性能とテスト範囲を確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/minimax-ai/skills --skill react-native-dev

インストール後、Claude Code で/react-native-devを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
animations.md
components.md
engineering.md
forms.md
native-capabilities.md
navigation.md
networking.md
performance.md
state-management.md
styling.md
testing.md

詳細

React Native と Expo の開発ガイド

本番環境に対応した React Native および Expo アプリケーションを構築するための実践ガイドです。UI、アニメーション、状態管理、テスト、パフォーマンス、デプロイについて説明します。

参考資料

必要に応じて、以下のリソースを参照してください。

  • references/navigation.md — Expo Router：Stack、Tabs、NativeTabs（headerLargeTitle、headerBackButtonDisplayMode）、リンク、モーダル、シート、コンテキストメニュー
  • references/components.md — FlashList のパターン、expo-image、セーフエリア（contentInsetAdjustmentBehavior）、ネイティブコントロール、ぼかし／ガラス効果、ストレージ
  • references/styling.md — StyleSheet、NativeWind/Tailwind、プラットフォームスタイル、テーマ設定、ダークモード
  • references/animations.md — Reanimated 3：入場／退場、共有値、ジェスチャー、スクロール連動
  • references/state-management.md — Zustand（セレクター、永続化）、Jotai（アトム、派生状態）、React Query、Context
  • references/forms.md — React Hook Form + Zod：バリデーション、複数ステップ、動的配列
  • references/networking.md — fetch ラッパー、React Query（楽観的更新）、認証トークン、オフライン、API ルート、Webhook
  • references/performance.md — プロファイリングのワークフロー、FlashList + memo、バンドル分析、TTI、メモリリーク、アニメーションのパフォーマンス
  • references/testing.md — Jest、React Native Testing Library、Maestro による E2E テスト
  • references/native-capabilities.md — カメラ、位置情報、権限（use*Permissions フック）、触覚フィードバック、通知、生体認証
  • references/engineering.md — プロジェクト構成（components/ui/、stores/、services/）、パスエイリアス、SDK のアップグレード、EAS によるビルド／提出、CI/CD、DOM コンポーネント

クイックリファレンス

コンポーネントの選択
用途使用するもの代わりに使わないもの
リストFlashList（@shopify/flash-list）+ memo 対応の項目FlatList（ビューのリサイクルなし）
画像expo-imageRN の <Image>（キャッシュなし、WebP 非対応）
押下PressableTouchableOpacity（旧式）
オーディオexpo-audioexpo-av（非推奨）
動画expo-videoexpo-av（非推奨）
アニメーションReanimated 3RN Animated API（機能に制限あり）
ジェスチャーGesture HandlerPanResponder（旧式）
プラットフォーム判定process.env.EXPO_OSPlatform.OS
ContextReact.use()React.useContext()（React 18）
セーフエリア内のスクロールcontentInsetAdjustmentBehavior="automatic"<SafeAreaView>
SF Symbolssource="sf:name" を指定した expo-imageexpo-symbols
規模の拡大
状況検討するもの
長いリストでスクロールがカクつく仮想化リストライブラリ（例：FlashList）
Tailwind 風のクラスを使いたいNativeWind v4
高頻度のストレージ読み取り同期ベースのストレージ（例：MMKV）
Expo を使った新規プロジェクト裸の React Navigation より Expo Router
状態管理
状態の種類解決策
ローカルの UI 状態useState / useReducer
アプリ内で共有する状態Zustand または Jotai
サーバー／非同期データReact Query
フォームの状態React Hook Form + Zod
パフォーマンスの優先事項
優先度問題対処法
CRITICAL長いリストのスクロールがカクつくFlashList + メモ化した項目
CRITICALバンドルが大きいバレルインポートを避け、R8 を有効にする
HIGH再レンダリングが多すぎるZustand セレクター、React Compiler
HIGH起動が遅いバンドル圧縮を無効にし、ネイティブナビゲーションを使う
MEDIUMアニメーションがコマ落ちするtransform／opacity のみをアニメーションさせる

新規プロジェクトの初期化

# 1. Create project
npx create-expo-app@latest my-app --template blank-typescript
cd my-app

# 2. Install Expo Router + core deps
npx expo install expo-router react-native-safe-area-context react-native-screens

# 3. (Optional) Common extras
npx expo install expo-image react-native-reanimated react-native-gesture-handler

次に、以下を設定します。

  1. package.json でエントリーポイントを設定します："main": "expo-router/entry"
  2. app.json にスキームを追加します："scheme": "my-app"
  3. App.tsx と index.ts を削除します
  4. ルートの Stack レイアウトとして app/_layout.tsx を作成します
  5. タブナビゲーション用に app/(tabs)/_layout.tsx を作成します
  6. app/(tabs)/ にルートファイルを作成します（navigation.md を参照）

Web サポートには、次もインストールします：npx expo install react-native-web react-dom @expo/metro-runtime

基本原則

実装前にリファレンスを確認する：ナビゲーション、リスト、ネットワーク、またはプロジェクトのセットアップを実装する際は、上記の該当するリファレンスファイルを読み、パターンと注意点を確認してください。

まず Expo Go を試す（npx expo start）。ローカルの Expo モジュール、Apple のターゲット、または Expo Go に含まれないサードパーティ製ネイティブモジュールを使用する場合に限り、カスタムビルド（eas build）が必要です。

条件付きレンダリング：{count && <Text />} ではなく {count > 0 && <Text />} を使用してください（前者は「0」をレンダリングします）。

アニメーションのルール：アニメーションを付けるのは transform と opacity のみです。GPU で合成され、レイアウトの再計算が発生しません。

インポート：バレルファイルではなく、常にソースから直接インポートしてください。バンドルの肥大化を防げます。

リストと画像：FlatList または RN の Image を使う前に、上記のコンポーネント設定表を確認してください。FlashList と expo-image がほとんどの場合、適切な選択肢です。

ルートファイル：常に kebab-case を使用し、app/ にコンポーネント、型、ユーティリティを同居させないでください。

チェックリスト

新規プロジェクトのセットアップ
  • tsconfig.json のパスエイリアスを設定済み
  • 環境ごとに EXPO_PUBLIC_API_URL 環境変数を設定済み
  • ルートレイアウトに GestureHandlerRootView を設定済み（ジェスチャーを使用する場合）
  • すべてのスクロールビューに contentInsetAdjustmentBehavior="automatic" を設定済み
  • 20 件を超えるリストでは FlatList の代わりに FlashList を使用
リリース前
  • --profile モードでプロファイリングし、16ms を超えるフレームを修正済み
  • バンドルを分析済み（source-map-explorer）。バレルインポートなし
  • Android で R8 を有効化済み
  • 重要な処理経路の単体テストとコンポーネントテストを実施済み
  • ログイン、主要機能、チェックアウトの E2E フローを実施済み

Flutter 開発 → flutter-dev スキルを参照してください。 iOS ネイティブ（UIKit/SwiftUI）→ ios-application-dev スキルを参照してください。 Android ネイティブ（Kotlin/Compose）→ android-native-dev スキルを参照してください。

React Native は Meta Platforms, Inc. の商標です。Expo は 650 Industries, Inc. の商標です。その他すべての製品名は、それぞれの所有者の商標です。

コメント

Markdown 対応