react-native-architecture

React Native アーキテクチャ

Expo を使用した React Native 開発のための本番環境対応パターン。ナビゲーション、状態管理、ネイティブモジュール、オフラインファーストアーキテクチャを含みます。

このスキルを使用するタイミング

• 新しい React Native または Expo プロジェクトを開始するとき
• 複雑なナビゲーションパターンを実装するとき
• ネイティブモジュールやプラットフォーム API を統合するとき
• オフラインファーストのモバイルアプリケーションを構築するとき
• React Native のパフォーマンスを最適化するとき
• モバイルリリース用の CI/CD をセットアップするとき

中核となる概念

1. プロジェクト構造

src/
├── app/                    # Expo Router screens
│   ├── (auth)/            # Auth group
│   ├── (tabs)/            # Tab navigation
│   └── _layout.tsx        # Root layout
├── components/
│   ├── ui/                # Reusable UI components
│   └── features/          # Feature-specific components
├── hooks/                 # Custom hooks
├── services/              # API and native services
├── stores/                # State management
├── utils/                 # Utilities
└── types/                 # TypeScript types

2. Expo と Bare React Native の比較

機能	Expo	Bare RN
セットアップの複雑さ	低い	高い
ネイティブモジュール	EAS Build	手動リンク
OTA アップデート	組み込み	手動セットアップ
ビルドサービス	EAS	カスタム CI
カスタムネイティブコード	Config プラグイン	直接アクセス

クイックスタート

# Create new Expo project
npx create-expo-app@latest my-app -t expo-template-blank-typescript

# Install essential dependencies
npx expo install expo-router expo-status-bar react-native-safe-area-context
npx expo install @react-native-async-storage/async-storage
npx expo install expo-secure-store expo-haptics

// app/_layout.tsx
import { Stack } from 'expo-router'
import { ThemeProvider } from '@/providers/ThemeProvider'
import { QueryProvider } from '@/providers/QueryProvider'

export default function RootLayout() {
  return (
    <QueryProvider>
      <ThemeProvider>
        <Stack screenOptions={{ headerShown: false }}>
          <Stack.Screen name="(tabs)" />
          <Stack.Screen name="(auth)" />
          <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
        </Stack>
      </ThemeProvider>
    </QueryProvider>
  )
}

詳細なパターンと実例

詳細なパターンのドキュメントは references/details.md にあります。上記のナビゲーションの階層では不十分な場合に、そのファイルを参照してください。

ベストプラクティス

すべきこと

• Expo を使用する - より迅速な開発、OTA アップデート、管理されたネイティブコード
• FlatList より FlashList - 長いリストでのパフォーマンス向上
• コンポーネントをメモ化する - 不要な再レンダリングを防ぐ
• Reanimated を使用する - ネイティブスレッドでの 60fps アニメーション
• 実機でテストする - シミュレーターでは実際の環境の問題を見逃す

すべきでないこと

• スタイルをインライン化しない - パフォーマンスのために StyleSheet.create を使用する
• レンダー内でフェッチしない - useEffect または React Query を使用する
• プラットフォームの違いを無視しない - iOS と Android の両方でテストする
• コードにシークレットを保存しない - 環境変数を使用する
• エラーバウンダリを省略しない - モバイルのクラッシュは容赦ない