ReactNativeの環境構築について

超初心者でもわかる、Androidの環境構築がなかったので、記事にして残しておきます~~~!
(2019年8月更新)

開発環境

MacOS : Mojave/10.14.6
node : v10.15.3
react-native-cli : 2.0.1
react-native : 0.60.4
npm : 6.4.1

対象者

react-nativeを使用して、iOSを立ち上げることは成功したけど、Androidの立ち上げがうまくいかない人。

それでは、Start!!!!!

①JDK 8をインストール

まずは、Androidを動かすために必要なJavaを入れます。
※注意:Javaのバージョンは最新のものではなく、8を使用します！
（うｐ主が、他のバージョンだとうまく動かせないからです。）

Oracleからダウンロードしたいので、アカウントを作成する必要があります。

アカウントが完成したならば、以下の記事を参考にして、Java8をインストールしていきます。

macOS に Oracle Java 8 (JDK) をインストールする手順

インストールが完了したら、ターミナルやiTermｓでJavaが8入っているか確認しましょう！

java -version
//下記が確認できればOK!
java version "1.8.0_221"

②パスを通す！

初心者だと、「パスってなんやねん」、「それしなくてもいけそう〜」みたいな感覚になりがちになるのですが、めっちゃ大事なので、絶対にして下さい！（今回はやり方の解説だけします）
※注意 : 今回は、bash（初心者の人は大抵これなので安心してこの注意文は無視して下さい）向けの人に解説します！
(zsh使ってる人は解説いらないでしょう)

ターミナル、iTermを開いて準備する
vimを使用して、ターミナル上で編集していきます。

//コピペする
vi ~/.bash_profile

そうすると以下の画面になると思います。

キーボードの矢印を使用して、カーソルを移動することができるので、適当に空いてる行に移動し、編集していきます

//そのままでは編集できないので,「i」を押しましょう→編集可能になります。
//下のものをコピペしましょう。Javaだけでなく、後々使うAndroidSdkのパスも一緒に通しておきます。
export JAVA_HOME=`/usr/libexec/java_home -v 1.8`
export PATH=/usr/local:$PATH:$NODEBREW_HOME/bin:$ANDROID_HOME:$ANDROID_NDK_HOME:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

コピペができたら、escボタンを押して、編集状態を解除し、編集した内容を保存していきます

//編集した内容を保存して、vimの編集を終了したいので以下のコマンドを今の画面のまま打ちます。
//注意:escボタンを押したあとに必ずやって下さい！
:wq

上記ことを行うと元のターミナルの画面に戻ってきます。
変更したないようを設定ファイルに反映したいので、ターミナルで以下のコマンドを実行します。

source ~/.bash_profile

→これにてパスの設定は完了！

③Android StudioのDownloadとinstall

公式からAndroid Studioをダウンロードしてきましょう!

ダウンロードが完了したらインストールしていきます。
インストールタイプを選択するように言われるので"Custom"を選択します。
Android SDK
Android SDK Platform
Performance (Intel ® HAXM)
Android Virtual Device
この4つにチェックが入っていることを確認したら"next"をクリックしてインストールします。
インストールが完了すると以下の画面が現れます。（でてこなかったら、Android Studioを立ち上げましょう！）

SDK等さらに必要なファイルをインストールしていきます。
初期の画面の下の部分から、Configure -> SDK Manager を起動し、SDK Platforms → Android 6.0 (Marshmallow)をインストールします。以下の画面に沿って同じ箇所にチェックして下さい。

最後に、"Apply"をClickしてSDKやビルドツールをdownloadしてinstallします。

-　次にAVDの作成をしていきます！画像通りに進めて下さい。

→AVD Nameの最後の2はいりません(うｐ主が既に、1つ作ってるので勝手に２と振られてしまっています)

⑤最後にエミュレーターを動かす

react-nativeでは、iOSはシュミレーター（エミュレーター）を立ち上げなくても、cliでアプリを起動することができるのですが、

ターミナル.

react-native run-ios

Androidは、先にエミュレーターを立ち上げておかないと、アプリを起動することができません！
↑ここポイント!!!!
なので、エミュレーターを立ち上げてから、アプリを起動していきたいと思います

エミュレーター起動

アプリを起動する

//サーバーを立ち上げる
npm start

//Androidでアプリを立ち上げる
react-native run-android

※注意 : サーバーを立ち上げるターミナルと、アプリを立ち上げるターミナルは分ける
[おすすめの方法]
ターミナル上でcmd+Dをすると分割することができるので、どちらでもプロジェクトのディレクトリに入って、１つはサーバーを立ち上げる、もう一つはアプリを立ち上げるにすることです。

参考記事

https://qiita.com/EBIHARA_kenji/items/2f6938c4fda7cecbeb19
https://qiita.com/takaishota/items/4db36a806a257582fa1f
https://qiita.com/tekoneko1997/items/ab1254e4472802514190#android-studio%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB
https://qiita.com/ponnjinnka/items/006b632a0b56369451b9

猿でもわかるAndroidの環境構築[ReactNative]