React Native Setup Troubleshooting - horihorikeitaa/PomofocusGuardApp GitHub Wiki

React Native プロジェクトのセットアップから実行までのガイド

セットアップ手順

1. プロジェクトの初期化

最初に特定のバージョン(0.73.4)を指定してインストールを試みましたが、エラーが発生しました。

npx [email protected] init PomofocusGuardApp

エラー内容:

✔ Downloading template
⠋ Copying templateerror Installing pods failed. This doesn't affect project initialization and you can safely proceed.
However, you will need to install pods manually when running iOS, follow additional steps in "Run instructions for iOS" section.

✖ Copying template

そのため、バージョン指定なしで Community CLI を使用して再度インストールを試みました：

npx @react-native-community/cli init PomofocusGuardApp

これにより、React Native 0.79.2 バージョンのプロジェクトが作成されました。

遭遇した問題と解決策

問題 1: CocoaPods インストールエラー

エラー内容

✖ Installing CocoaPods dependencies with New Architecture (this may take a few minutes)
error link_native_modules! {:ios_packages=>[], :ios_project_root_path=>"/Users/horikeifutoshita/src/PomofocusGuardApp/ios", :react_native_path=>"../node_modules/react-native"}
Framework build type is static library
Configuring the target with the New Architecture
Analyzing dependencies
Fetching podspec for `DoubleConversion` from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`
Fetching podspec for `RCT-Folly` from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`
[!] No podspec found for `ReactAppDependencyProvider` in `build/generated/ios`
error Installing Cocoapods failed.

原因

初期セットアップ時に、自動的なコード生成プロセス（Codegen）が正常に完了しなかったか、タイミングの問題で必要なファイル（ReactAppDependencyProvider.podspec）が生成される前に CocoaPods が依存関係を探そうとした。また、React Native のバージョンによっても挙動が異なる可能性があります。

解決策

以下の手順で CocoaPods を再インストールして手動で pod をインストールすることで解決：

# CocoaPodsを再インストール
gem uninstall cocoapods
gem install cocoapods

# iOSディレクトリに移動してpodをインストール
cd ios
pod install

解決の確認ポイント

正常にインストールが完了すると、以下のメッセージが表示される：

Pod installation complete! There are 72 dependencies from the Podfile and 71 total pods installed.

また、以下の警告も表示されるが、これは無視して OK：

[!] Please close any current Xcode sessions and use `PomofocusGuardApp.xcworkspace` for this project from now on.

問題 2: ビルドプロセスが「building the app」で止まる

症状

npm run iosを実行するとシミュレータは起動するが、ターミナルで「building the app」の段階で処理が止まったように見える。

原因

初回ビルドは時間がかかる場合があり、特に JavaScript バンドルの生成やネイティブコードのコンパイルに時間を要する。

解決策

  1. 辛抱強く待つ - 初回ビルドは 5〜10 分程度かかることもある
  2. Metro Bundler を別ターミナルで起動 
    npx react-native start
  3. キャッシュをクリアして再試行 
    npx react-native start --reset-cache
    別ターミナルで： 
    npx react-native run-ios
  4. Xcode で直接開く方法 
    cd ios
open PomofocusGuardApp.xcworkspace

推奨される開発ワークフロー

  1. プロジェクトディレクトリに移動

    cd PomofocusGuardApp

  2. Metro Bundler を起動（ターミナル 1）

    npx react-native start

  3. アプリをビルド・実行（ターミナル 2）

    npx react-native run-ios
# または
npm run ios

  4. 開発中に問題が発生した場合のリセット

    # Metro Bundlerのキャッシュをクリア
npx react-native start --reset-cache

# または必要に応じてiOSのpodを再インストール
cd ios
pod install
cd ..

注意点

  • Xcode で開発する際は、.xcodeprojではなく.xcworkspaceを使用する
  • 環境変数やパスの問題が発生した場合は、brew doctorで Homebrew の状態を確認する
  • 新しいライブラリをインストールした後は、pod も更新する必要がある
  • 初回のビルドには時間がかかるため、辛抱強く待つ
  • React Native のバージョンによってセットアッププロセスが異なる場合がある。最新の公式ドキュメントを参照することを推奨

追加情報

  • React Native バージョン: 0.79.2（最初は 0.73.4 を試みた）
  • Node.js バージョン: 18 以上（package.json の engines 要件より）
  • CocoaPods バージョン: 1.16.2
  • macOS: darwin 24.4.0

Android ビルドに必要な環境設定

  1. Android Studio のインストール確認

    android --version
# または
which android

  2. 環境変数の設定 以下の環境変数が設定されているか確認：

    echo $ANDROID_HOME

    設定されていない場合は、~/.zshrcまたは~/.bash_profileに追加：

    export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

  3. エミュレータの確認と作成

    # 利用可能なエミュレータの一覧を表示
$ANDROID_HOME/emulator/emulator -list-avds

# エミュレータがない場合はAndroid Studioから作成する

Android アプリのビルドと実行

  1. エミュレータを起動

    # 別のターミナルでエミュレータを起動
$ANDROID_HOME/emulator/emulator -avd [エミュレータ名]
# 例: $ANDROID_HOME/emulator/emulator -avd Pixel_5_API_33

    または

    # エミュレータマネージャーを起動
$ANDROID_HOME/tools/emulator -avd avd_name

  2. Metro Bundler を起動

    # プロジェクトルートディレクトリで実行
npx react-native start

  3. アプリをビルドして実行

    # 別のターミナルで実行
npx react-native run-android
# または
npm run android

トラブルシューティング

  1. Gradle ビルドエラーの場合

    # gradlew実行権限の確認と付与
cd android
chmod +x gradlew
./gradlew clean
cd ..

  2. キャッシュクリア

    npx react-native start --reset-cache

  3. Android studio 経由でビルド

    # android/ディレクトリをAndroid Studioで開く
cd android
./gradlew assembleDebug

Android ビルドを実行すると、最初は少し時間がかかりますが、エミュレータ上でアプリが起動するはずです。詳細な進捗状況はターミナルで確認できます。何か問題が発生した場合は、エラーメッセージを確認して対応しましょう。

⚠️ **GitHub.com Fallback** ⚠️