React Native アプリ開発

目次

• 概要
• 使用場面
• クイックスタート
• リファレンスガイド
• ベストプラクティス

概要

ナビゲーション、状態管理、API統合、ネイティブモジュール処理などの最新の開発パターンを含む、React Nativeを使用した堅牢なクロスプラットフォームモバイルアプリケーションを作成します。

使用場面

• 単一のコードベースからiOSとAndroidアプリを構築
• モバイルプラットフォームの高速プロトタイピング
• ウェブ開発スキルのモバイルへの応用
• React NativeとReact Webの間でコードを共有
• ネイティブモジュールとAPIの統合

クイックスタート

最小限の動作例:

// React Navigationでのナビゲーション
import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Ionicons } from "@expo/vector-icons";

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

function HomeStack() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerStyle: { backgroundColor: "#6200ee" },
        headerTintColor: "#fff",
        headerTitleStyle: { fontWeight: "bold" },
      }}
    >
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ title: "Home Feed" }}
      />
      <Stack.Screen name="Details" component={DetailsScreen} />
// ... (詳細な実装についてはリファレンスガイドを参照してください)

リファレンスガイド

references/ ディレクトリの詳細な実装:

ベストプラクティス

✅ やるべきこと

• React Hooksを使用した関数コンポーネントを使用
• 適切なエラーハンドリングとローディング状態を実装
• 状態管理にReduxまたはContext APIを使用
• ルーティングにReact Navigationを活用
• FlatListでリストレンダリングを最適化
• プラットフォーム固有のコードを適切に処理
• 型安全性のためTypeScriptを使用
• iOSとAndroidの両方でテスト
• API エンドポイントに環境変数を使用
• 適切なメモリ管理を実装

❌ やってはいけないこと

• インラインスタイルを過度に使用（StyleSheetを使用）
• エラーハンドリングなしにAPI呼び出しを行う
• 機密データをプレーンテキストで保存
• プラットフォームの違いを無視
• 大規模なモノリシックコンポーネントを作成
• リストのキーとしてインデックスを使用
• 同期操作を行う
• バッテリー最適化を無視
• 実機でのテストなしにデプロイ
• リスナーの登録解除を忘れる