インストール＆起動手順
- Xcode - Command Line Toolsをインストールするために必要。iOSアプリにも必要。
- Homebrew - Mac用のパッケージマネージャー。
- Java Development Kit (JDK) - Androidアプリを走らせるにはJDKが必要。
- Node.js - React Native等のJavascriptモジュールをインストールするために必要。
- yarn - npmに代わる最新のJavascriptパッケージマネージャー。
- React Native CLI - React Nativeプロジェクトを作成したりアプリを起動するために必要。
- Android Studio - React Nativeでは主にAndroidのSDKをインストールするために利用。
- Virtual Box - Genymotionを走らせるためのバーチャルマシン。
- Genymotion - 高速Androidシミュレーター。
- React Nativeプロジェクト新規作成し、Genymotion上で動かすには
- 既存のReact NativeプロジェクトをGenymotion上で動かすには
Xcode
Command Line Toolsをインストールするため、[App StoreからXcode](https://itunes.apple.com/jp/app/xcode/id497799835)をインストール。サイズが大きいので注意！Homebrew
[Homebrewのサイト](https://brew.sh/)に書いてある方法でHomebrewをインストール。2017年7月時点では下記のコマンドをターミナルに入力。ちなみにターミナルは、Mac画面右上の虫眼鏡マークをクリックして、`terminal`と検索＆選択すれば起動します。/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Java Development Kit
[Oracle](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html)からMac OS用のJava Development Kitをダウンロードしてインストール。
Node.js
Homebrewをインストール後、下記のコマンドをターミナルに入力して、nodeをインストール。$ brew install node
yarn
Homebrewをインストール後、下記のコマンドをターミナルに入力して、yarnをインストール。$ brew install yarn
React Native CLI
nodeをインストール後、下記のコマンドをターミナルに入力して、React Native CLI (command line interface)をインストール。$ npm install -g react-native-cli
Android Studio
[Android Studioのサイト](https://developer.android.com/studio/index.html?hl=ja)からAndroid Studioをダウンロードしてインストール。インストール後、Android Studioを開いて、Configure -> SDK Managerを選択。
次に、Android 6.0 (Marshmallow) 23を選択して、OKをクリックしてSDKをインストール。ちなみに、Android SDK Locationの情報はGenymotionのセットアップに必要なので、キープしておいてください。
ターミナルからホームディレクトリに移動して、.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
VirtualBox
[VirtualBoxのサイト](https://www.virtualbox.org/wiki/Downloads)からMac用のファイルをダウンロードして、インストール。
Genymotion
VirtualBoxをインストールした後に、[Genymotionをここ](https://www.genymotion.com/fun-zone/)からダウンロード。アカウントを作る必要があるので、アカウントがない方は作成してください。個人利用ならばフリーです。
無事インストールが済んだら、Genymotionを起動して、Settingをクリック。
現れたウィンドウ内のADBタブを選択して、Use custom Android SDK Toolsを選択。テキストフィールドに先程Android StudioにあったAndroid SDK Locationをコピペ。ちなみに、デフォルトではUser/{ホームディレクトリ名}/Library/Android/sdkです。
つぎに、Addボタンを押して、実際に使うAndroidバーチャルデバイスを作成します。基本的になんでも良いですが、OSはAndroid Version 6 以降、デバイスはGoogle Nexusのどれかをおすすめします。
今度はAndroid Studioを起動し、またSDK Managerを選択。
そして今回はPluginsを選択。そしてBrowse Repositories...ボタンをクリック。
Genymotionを検索し、インストール。このプラグインを入れることによってAndroid StudioからGenymotionにアクセスできます。
React Nativeプロジェクト新規作成し、Genymotion上で動かすには
ターミナルで任意のディレクトリに移動し、下記のコマンド＋プロジェクト名を入力して新規プロジェクトを作成。projectNameは任意で書き換えてください。
$ react-native init projectName
Android Studioを起動し、Open an existing Android Studio projectを選択し、OKボタンをクリック。
そして新規作成したReact Nativeプロジェクト内にあるandroidディレクトリを選択。
Android Gradle Pluginをアップデートしろ、みたいなメッセージが出てきたら、Don't remind me again for this projectボタンを押して無視しましょう。アップデートしてしまうと動かなくなる可能性があります。
メインビューが表示されるので、アイコンの並びの一番右にある赤いAndroidのアイコンをクリックして、Genymotionの選択ウィンドウを開く。
Genymotionの選択ウィンドウにGenymotion設定時に作成したAndroidバーチャルデバイスのリストが表示されますので、任意のデバイスを選択して、Start...ボタンをクリック。
するとバーチャルデバイスが起動します。
バーチャルデバイスが起動した状態で、ターミナルでプロジェクトのディレクトリに移動し、下記のコマンドを入力してReact Nativeアプリをバーチャルデバイス内で起動します。
$ react-native run-android
既存のReact NativeプロジェクトをGenymotion上で動かすには
Android Studioを起動し、Open an existing Android Studio projectを選択し、OKボタンをクリック。
そして既存のReact Nativeプロジェクト内にあるandroidディレクトリを選択。
Android Gradle Pluginをアップデートしろ、みたいなメッセージが出てきたら、Don't remind me again for this projectボタンを押して無視しましょう。アップデートしてしまうと動かなくなる可能性があります。
メインビューが表示されるので、アイコンの並びの一番右にある赤いAndroidのアイコンをクリックして、Genymotionの選択ウィンドウを開く。
Genymotionの選択ウィンドウにGenymotion設定時に作成したAndroidバーチャルデバイスのリストが表示されますので、任意のデバイスを選択して、Start...ボタンをクリック。
するとバーチャルデバイスが起動します。
バーチャルデバイスが起動した状態で、ターミナルでプロジェクトのディレクトリに移動し、下記のコマンドを入力してReact Nativeアプリをバーチャルデバイス内で起動します。
$ react-native run-android