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

# ReactNativeの環境構築について
**超初心者**でもわかる、**Android**の環境構築がなかったので、記事にして残しておきます~~~!
<font color="Red">**(2019年8月更新)**</font>


# 開発環境
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](http://bit.ly/2Z6eIw2)からダウンロードしたいので、アカウントを作成する必要があります。

<img width="1000" alt="スクリーンショット 2019-08-16 16.59.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302458/ad527827-882f-0043-ca46-036c790a35d4.png">


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

> [macOS に Oracle Java 8 (JDK) をインストールする手順](http://bit.ly/2H8Sn6U)

<img width="1679" alt="スクリーンショット 2019-08-16 17.12.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302458/645f7820-8b69-6a4c-b859-dfdc0569a84f.png">

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

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

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


- ターミナル、iTermを開いて準備する
<img width="1000" alt="スクリーンショット 2019-08-16 17.25.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302458/1d1e707b-d1b9-f0c2-f415-82bc5ae5afab.png">

- vimを使用して、ターミナル上で編集していきます。

```sh
//コピペする
vi ~/.bash_profile
```
そうすると以下の画面になると思います。

<img width="1680" alt="スクリーンショット 2019-08-16 17.36.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302458/9d142a79-75aa-ca1a-0849-7b5d8306e110.png">

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

```sh
//そのままでは編集できないので,「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
```

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

```sh
source ~/.bash_profile
```
→これにてパスの設定は完了！


## ③Android StudioのDownloadとinstall

- 公式からAndroid Studioを[ダウンロード](https://developer.android.com/studio/)してきましょう!

<img width="1000" alt="スクリーンショット 2019-08-16 18.01.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302458/1ae699ef-6858-f064-ceca-174546265f09.png">

- ダウンロードが完了したらインストールしていきます。
インストールタイプを選択するように言われるので"Custom"を選択します。
 ```Android SDK ```
 ``` Android SDK Platform ```
 ``` Performance (Intel ® HAXM) ```
 ``` Android Virtual Device ```
この4つにチェックが入っていることを確認したら"next"をクリックしてインストールします。

- インストールが完了すると以下の画面が現れます。（でてこなかったら、Android Studioを立ち上げましょう！）

<img width="777" alt="スクリーンショット 2019-08-16 18.08.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302458/958740f9-6821-42c8-b09a-3f9f4cdf2c31.png">

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

<img width="685" alt="スクリーンショット 2019-08-16 18.13.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302458/17a33a7a-1d69-035b-2f19-d37a8d4999d5.png">

<img width="897" alt="スクリーンショット 2019-08-16 18.16.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302458/5f766762-0f26-33b3-21e5-23b94c3fc302.png">

<img width="894" alt="スクリーンショット 2019-08-16 18.20.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302458/fa85aa49-ffdd-eb1e-133f-0b2e0ed0a05b.png">


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

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

<img width="662" alt="スクリーンショット 2019-08-16 18.33.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302458/7317300e-10cf-a0eb-8c7b-354053aaee1e.png">
<img width="957" alt="スクリーンショット 2019-08-16 18.36.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302458/8b5b69c3-330e-2e16-3a3f-efecceb0d017.png">
<img width="1002" alt="スクリーンショット 2019-08-16 18.38.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302458/d967f838-99c8-eb4c-f583-430b03e0f68e.png">
<img width="1001" alt="スクリーンショット 2019-08-16 18.38.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302458/252d95ba-6fca-c6a6-198b-8bc1efde7651.png">

<img width="1002" alt="スクリーンショット 2019-08-16 18.39.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302458/ddd07196-cd4c-4ed4-438b-a4f8c9055d1e.png">
→AVD Nameの最後の2はいりません(うｐ主が既に、1つ作ってるので勝手に２と振られてしまっています)

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

```sh:ターミナル.
react-native run-ios
```

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

- エミュレーター起動
<img width="662" alt="スクリーンショット 2019-08-16 18.33.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302458/7317300e-10cf-a0eb-8c7b-354053aaee1e.png">
<img width="945" alt="スクリーンショット 2019-08-16 18.50.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302458/594fb449-327c-60f7-fad1-45eb46347924.png">

<img width="487" alt="スクリーンショット 2019-08-16 19.03.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302458/89e961ad-85e2-b4cb-e050-74d1233019d0.png">

- アプリを起動する

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

```sh
//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

### もし、わからないことがあれば、コメントで質問受け付けます〜〜〜