React Native の開発環境

モバイルアプリケーションを開発するための React Native でも Node.js などは必要です。

その他、例えばアンドロイドの開発などでは Android 向けの Google API、Intel x86 Atom_64 System Image などが必要とか、細々と環境によって違いますので、React Native のオフィシャルページの方を参照してください。

React Native

Mac 上での環境設定

参考までに Mac 上で iPhone 向けの環境を構築するときの手順は次のようになります。まだインストールされていないものだけ追加します。

node のインストール
Homebrew のインストール
watchman のインストール
Xcode コマンドラインツールのインストール
iOS シミュレータのインストール
CocoaPods のインストール

Android のビルド用の環境設定について

環境変数 ANDROID_HOME を設定する必要があります。

bash を利用している場合は ~/.bash_profile に、zsh を利用している場合は ~/.zprofile に次の内容を設定します。

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

動作確認

Android 向け、iOS 向けそれぞれの Hello world について、次の記事を見てください。

最終的に、次のようなコマンドの流れでデバイス（もしくはエミュレータ）上で Welcome メッセージが表示されれば OK です。

npx react-native init AwesomeProject
cd AwesomeProject
npx react-native run-ios

これで動かない場合は、Xcode でワークスペース ios/AwesomeProject.xcworkspaceを開き、ビルドができ、iPhone で実行できるか確認してみてください。例えばチームが設定できていないなどでビルドが失敗する場合があります。

make sure you're running a packager server というメッセージが出る場合は、ターミナルでプロジェクトのディレクトリに移動して次のコマンドを実行して

yarn start

シミュレータ上の Reload ボタンでリロードしてみてください。