概要
React Native ～JavaScriptによるiOS／Androidアプリ開発の実践という本の、開発環境の構築（3章）のコマンドを順番に実行していった時に、発生したエラーを解消するために行ったことの個人的メモです。
環境
- macOS Catalina
npx react-native run-androidコマンドでエラーが出たときに確認すること
基本的は、本に記載されているコマンドと設定を順番に実行していけば、問題ないです。npx react-native runでエラーが発生してビルドが成功しなかったので、npx react-native doctorのコマンドを確認したところ、以下のエラーが出てきました。
ANDROID_HOMEに❌がついている場合
ターミナルの設定ファイル(.bash_profile)にパスが通っているか確認します。
#.bash_profileが現在のディレクトリにあるか確認する。
#ターミナルを起動したときは、ホームディレクトリで起動するので、存在するはず
ls -a
#エディタを起動して、ファイルの冒頭にアンドロイドのパスを通す
nano .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
control + x を入力し、ファイルを編集していた場合は保存するか聞かれるため、yを入力してファイルを保存して終了します。
ファイルの更新した後、コマンドラインを更新します。
source ~/.bash_profile
パスが通っているか以下コマンドで確認します。
ターミナルに先程記載したパスが表示されれば大丈夫です。
echo $PATH
SDKのパスはAndroid Studioの Tools > SDK Managerから確認することができます。
ANDROID SDKに❌がついている場合
以下コマンドでサンプルプロジェクトを作成したと思います。
npx react-native init MyApp --template ract-native-template-typescript@6.3.16
作成したプロジェクトのMyApp\android\gradle\wrapper\gradle-wrapper.propertiesの設定を変更します。
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
- distributionUrl=https\://services.gradle.org/distributions/gradle-5.6.4-bin.zip
+ distributionUrl=https\://services.gradle.org/distributions/gradle-6.3-all.zip
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
npx react-native doctorを実行するとANDROID SDKに❌がつきますが、Andoroid Studioでエミュレータを起動して、以下コマンドを実行すると、エミュレータ上で起動することが確認できます。
npx react-native run-android
参考
https://note.com/ahiruchanco/n/ne7e8d0d05f78
https://taktak.jp/2020/04/02/4275
https://qiita.com/tekoneko1997/items/ab1254e4472802514190