npx react-native doctorで❌が出たときに確認したこと

概要

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

.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の設定を変更します。

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