react-native-app

React Native アプリ開発

目次

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

概要

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

使用する場面

• 1 つのコードベースから iOS と Android のアプリを開発する場合
• モバイルプラットフォーム向けに迅速にプロトタイプを作成する場合
• モバイル開発にウェブ開発のスキルを活用する場合
• React Native と React Web の間でコードを共有する場合
• ネイティブモジュールや API と統合する場合

クイックスタート

最小限の動作例：

// Navigation with 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} />
// ... (see reference guides for full implementation)

リファレンスガイド

詳細な実装は references/ ディレクトリにあります。

ガイド	内容
プロジェクトのセットアップとナビゲーション	プロジェクトのセットアップとナビゲーション
Redux による状態管理	Redux による状態管理
Axios による API 統合	Axios による API 統合
Hooks を使った関数コンポーネント	Hooks を使った関数コンポーネント

ベストプラクティス

✅ DO

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

❌ DON'T

• インラインスタイルを多用しないでください（StyleSheet を使用します）
• エラー処理なしで API を呼び出さないでください
• 機密データを平文で保存しないでください
• プラットフォーム間の違いを無視しないでください
• 大規模でモノリシックなコンポーネントを作成しないでください
• リスト内で key に index を使用しないでください
• 同期処理を行わないでください
• バッテリー最適化を無視しないでください
• 実機でテストせずにデプロイしないでください
• リスナーの登録解除を忘れないでください