Mac上でReact NativeのAndroidアプリを動かす。 2017年7月版 (Mac OS X 10.12 + React Native 0.46 + Genymotion)

# インストール＆起動手順
1. [Xcode](#xcode) - Command Line Toolsをインストールするために必要。iOSアプリにも必要。
1. [Homebrew](#homebrew) - Mac用のパッケージマネージャー。
1. [Java Development Kit \(JDK\)](#jdk) - Androidアプリを走らせるにはJDKが必要。
1. [Node.js](#node) - React Native等のJavascriptモジュールをインストールするために必要。
1. [yarn](#yarn) - npmに代わる最新のJavascriptパッケージマネージャー。
1. [React Native CLI](#rncli) - React Nativeプロジェクトを作成したりアプリを起動するために必要。
1. [Android Studio](#androidstudio) - React Nativeでは主にAndroidのSDKをインストールするために利用。
1. [Virtual Box](#virtualbox) - Genymotionを走らせるためのバーチャルマシン。
1. [Genymotion](#genymotion) - 高速Androidシミュレーター。
1. [React Nativeプロジェクト新規作成し、Genymotion上で動かすには](#reactnative)
1. [既存のReact NativeプロジェクトをGenymotion上で動かすには](#runandroid)

<h1 id="xcode">Xcode</h1>
Command Line Toolsをインストールするため、[App StoreからXcode](https://itunes.apple.com/jp/app/xcode/id497799835)をインストール。サイズが大きいので注意！

<h1 id="homebrew">Homebrew</h1>
[Homebrewのサイト](https://brew.sh/)に書いてある方法でHomebrewをインストール。2017年7月時点では下記のコマンドをターミナルに入力。ちなみにターミナルは、Mac画面右上の虫眼鏡マークをクリックして、`terminal`と検索＆選択すれば起動します。

```
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

<h1 id="jdk">Java Development Kit</h1>
[Oracle](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html)からMac OS用のJava Development Kitをダウンロードしてインストール。

<img width="557" alt="jdk.png" src="https://qiita-image-store.s3.amazonaws.com/0/97033/fda126c1-3065-8fd5-dd30-760b32fbaa66.png">

<h1 id="node">Node.js</h1>
Homebrewをインストール後、下記のコマンドをターミナルに入力して、nodeをインストール。

```
$ brew install node
```

<h1 id="yarn">yarn</h1>
Homebrewをインストール後、下記のコマンドをターミナルに入力して、yarnをインストール。

```
$ brew install yarn
```

<h1 id="rncli">React Native CLI</h1>
nodeをインストール後、下記のコマンドをターミナルに入力して、React Native CLI (command line interface)をインストール。

```
$ npm install -g react-native-cli
```

<h1 id="androidstudio">Android Studio</h1>
[Android Studioのサイト](https://developer.android.com/studio/index.html?hl=ja)からAndroid Studioをダウンロードしてインストール。

インストール後、Android Studioを開いて、`Configure -> SDK Manager`を選択。

<img width="490" alt="sdk-manager.png" src="https://qiita-image-store.s3.amazonaws.com/0/97033/3f37c7ab-43ea-7b46-4479-41c3430f6a56.png">

次に、`Android 6.0 (Marshmallow) 23`を選択して、`OK`をクリックしてSDKをインストール。ちなみに、`Android SDK Location`の情報はGenymotionのセットアップに必要なので、キープしておいてください。

<img width="610" alt="23.png" src="https://qiita-image-store.s3.amazonaws.com/0/97033/7e817934-598f-0d10-b9ca-7948afb52e35.png">

ターミナルからホームディレクトリに移動して、`.bash_profile`を編集。

```
$ cd
$ vim .bash_profile
```

そして下記の情報を追記。vimの使い方はググってください。

```
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools

```

下記のコマンドで更新された`.bash_profile`を反映させる。

```
$ source .bash_profile
```

<h1 id="virtualbox">VirtualBox</h1>
[VirtualBoxのサイト](https://www.virtualbox.org/wiki/Downloads)からMac用のファイルをダウンロードして、インストール。

<img width="509" alt="virtualbox.png" src="https://qiita-image-store.s3.amazonaws.com/0/97033/441937f4-df65-dd2d-8be0-0364880ad93e.png">

<h1 id="genymotion">Genymotion</h1>
VirtualBoxをインストールした後に、[Genymotionをここ](https://www.genymotion.com/fun-zone/)からダウンロード。アカウントを作る必要があるので、アカウントがない方は作成してください。個人利用ならばフリーです。

![geny-personal.png](https://qiita-image-store.s3.amazonaws.com/0/97033/0c4b31b0-c23e-3e1d-15b8-df59e031c4fd.png)


無事インストールが済んだら、Genymotionを起動して、`Setting`をクリック。

<img width="794" alt="gm-top.png" src="https://qiita-image-store.s3.amazonaws.com/0/97033/be9a8aee-031d-4aab-ab75-abcd6d1e71d5.png">

現れたウィンドウ内の`ADB`タブを選択して、`Use custom Android SDK Tools`を選択。テキストフィールドに先程[Android Studio](#androidstudio)にあった`Android SDK Location`をコピペ。ちなみに、デフォルトでは`User/{ホームディレクトリ名}/Library/Android/sdk`です。

<img width="538" alt="gm-adb.png" src="https://qiita-image-store.s3.amazonaws.com/0/97033/67e82675-4c63-9cc2-6cd9-7eb078952ba2.png">

つぎに、`Add`ボタンを押して、実際に使うAndroidバーチャルデバイスを作成します。基本的になんでも良いですが、OSは`Android Version 6` 以降、デバイスは`Google Nexus`のどれかをおすすめします。

<img width="493" alt="gm-add.png" src="https://qiita-image-store.s3.amazonaws.com/0/97033/84a30854-2331-cbbb-0661-1ff54a92a64f.png">

今度は`Android Studio`を起動し、また`SDK Manager`を選択。

<img width="490" alt="sdk-manager.png" src="https://qiita-image-store.s3.amazonaws.com/0/97033/3f37c7ab-43ea-7b46-4479-41c3430f6a56.png">

そして今回は`Plugins`を選択。そして`Browse Repositories...`ボタンをクリック。

<img width="812" alt="android-plugins.png" src="https://qiita-image-store.s3.amazonaws.com/0/97033/8b398f08-66e2-8acd-dbe1-a309c407f69b.png">

`Genymotion`を検索し、インストール。このプラグインを入れることによってAndroid StudioからGenymotionにアクセスできます。

<img width="727" alt="as-geny.png" src="https://qiita-image-store.s3.amazonaws.com/0/97033/8b3f56a9-5fb7-e1b0-a415-39db92167b53.png">

<h1 id="reactnative">React Nativeプロジェクト新規作成し、Genymotion上で動かすには</h1>

ターミナルで任意のディレクトリに移動し、下記のコマンド＋プロジェクト名を入力して新規プロジェクトを作成。`projectName`は任意で書き換えてください。

```
$ react-native init projectName
```

`Android Studio`を起動し、`Open an existing Android Studio project`を選択し、`OK`ボタンをクリック。

![open.png](https://qiita-image-store.s3.amazonaws.com/0/97033/446353d6-c38d-5681-364e-ed39b698dacc.png)

そして新規作成したReact Nativeプロジェクト内にある`android`ディレクトリを選択。

![as-android.png](https://qiita-image-store.s3.amazonaws.com/0/97033/ddbbd126-6067-151b-cb97-55ec1711fb73.png)

Android Gradle Pluginをアップデートしろ、みたいなメッセージが出てきたら、`Don't remind me again for this project`ボタンを押して無視しましょう。アップデートしてしまうと動かなくなる可能性があります。

![gradle.png](https://qiita-image-store.s3.amazonaws.com/0/97033/1822fb18-012b-b502-4cbd-e11e3ddcf04b.png)

メインビューが表示されるので、アイコンの並びの一番右にある赤いAndroidのアイコンをクリックして、Genymotionの選択ウィンドウを開く。

![as-geny-open.png](https://qiita-image-store.s3.amazonaws.com/0/97033/9bd2a109-edbf-23c2-eea9-493694883cd5.png)

Genymotionの選択ウィンドウに[Genymotion設定時](#genymotion)に作成したAndroidバーチャルデバイスのリストが表示されますので、任意のデバイスを選択して、`Start...`ボタンをクリック。

![as-select-sim.png](https://qiita-image-store.s3.amazonaws.com/0/97033/3aa73e47-2326-f084-e57c-4897c8305c07.png)

するとバーチャルデバイスが起動します。

![vd.png](https://qiita-image-store.s3.amazonaws.com/0/97033/600c3cb0-be48-dcb3-05a0-f0003fb96638.png)

バーチャルデバイスが起動した状態で、ターミナルでプロジェクトのディレクトリに移動し、下記のコマンドを入力してReact Nativeアプリをバーチャルデバイス内で起動します。

```
$ react-native run-android
```
![new-project.png](https://qiita-image-store.s3.amazonaws.com/0/97033/110b4fdd-f10a-e0e9-a833-974ea3affef2.png)




<h1 id="runandroid">既存のReact NativeプロジェクトをGenymotion上で動かすには</h1>

`Android Studio`を起動し、`Open an existing Android Studio project`を選択し、`OK`ボタンをクリック。

![open.png](https://qiita-image-store.s3.amazonaws.com/0/97033/446353d6-c38d-5681-364e-ed39b698dacc.png)

そして既存のReact Nativeプロジェクト内にある`android`ディレクトリを選択。

![as-android.png](https://qiita-image-store.s3.amazonaws.com/0/97033/ddbbd126-6067-151b-cb97-55ec1711fb73.png)

Android Gradle Pluginをアップデートしろ、みたいなメッセージが出てきたら、`Don't remind me again for this project`ボタンを押して無視しましょう。アップデートしてしまうと動かなくなる可能性があります。

![gradle.png](https://qiita-image-store.s3.amazonaws.com/0/97033/1822fb18-012b-b502-4cbd-e11e3ddcf04b.png)

メインビューが表示されるので、アイコンの並びの一番右にある赤いAndroidのアイコンをクリックして、Genymotionの選択ウィンドウを開く。

![as-geny-open.png](https://qiita-image-store.s3.amazonaws.com/0/97033/9bd2a109-edbf-23c2-eea9-493694883cd5.png)

Genymotionの選択ウィンドウに[Genymotion設定時](#genymotion)に作成したAndroidバーチャルデバイスのリストが表示されますので、任意のデバイスを選択して、`Start...`ボタンをクリック。

![as-select-sim.png](https://qiita-image-store.s3.amazonaws.com/0/97033/3aa73e47-2326-f084-e57c-4897c8305c07.png)

するとバーチャルデバイスが起動します。

![vd.png](https://qiita-image-store.s3.amazonaws.com/0/97033/600c3cb0-be48-dcb3-05a0-f0003fb96638.png)

バーチャルデバイスが起動した状態で、ターミナルでプロジェクトのディレクトリに移動し、下記のコマンドを入力してReact Nativeアプリをバーチャルデバイス内で起動します。

```
$ react-native run-android
```
![new-project.png](https://qiita-image-store.s3.amazonaws.com/0/97033/110b4fdd-f10a-e0e9-a833-974ea3affef2.png)