Boostnote-mobileのオープンソースプロジェクトへプルリクを送るために、React-nativeのAndroid開発環境が必要だったので、その環境構築の過程のメモです。
リファレンス
以下のリンクは公式リファレンスです。
Gettting Started
Node, Watchmanのインストール
Homebrewを使用してNodeおよびWatchmanをインストールすることをお勧めします。
Homebrewをインストールした後、ターミナルで次のコマンドを実行します。
$ brew install node
$ brew install watchman
Nodeをインストールしている場合は、それがバージョン4以上であることを確認してください。
React NativeCLI(コマンドラインインターフェイス)のインストール
Nodeにはnpmが付属しており、React NativeCLIをインストールできます。
$ npm install -g react-native-cli
JDKのインストール
androidアプリを動かすためにはJavaの開発環境が必要になるのでインストールされていなければ下のURLからJDK(Java SE Development Kit)のインストールをします
Java SE Development Kit 8 Downloads
開発環境の設定
1.androidの開発環境を整えます。
-
ここからAndroid Studio(androidアプリ開発用のIDE)をダウンロードしてインストールします。
インストールタイプを選択するように求められたら、「Custom」セットアップを選択します。
次のすべてのチェックボックスがオンになっていることを確認します。
・Android SDK
・Android SDK Platform
・Performance (Intel ® HAXM)
・Android Virtual Device
2Android SDKのインストール
Android Studioのインストールが終わってWelcome画面がでてきたらAndroid SDKのインストールを行います。
React Nativeがネイティブアプリをビルドする際にはAndroid6.0(Marshmallow)のSDKを要求するため別途手動でインストールする必要があります。
Welcome画面の右下の「Configure」をクリックして「SDK Manager」を選択します。
「Android6.0(Marshmallow)」という項目を選択し、"Show package detail"で中身を見て以下のものをインストールします。
・Google APIs
・Android SDK Platform 23
・Intel x86 Atom_64 System Image
・Google APIs Intel x86 Atom_64 System_Image
3.次に上のタブで「SDK Tools」を選択して、「Show Package Details」をクリックします。
「Android SDK Build-Tools」という項目があるのでその中から「23.0.1」を選択します。
最後に「Apply」をクリックして、AndroidSDKとビルドツールをインストールします。
4.次に ANDROID_HOMEの環境変数を設定します。
react nativeはネイティブコードでアプリをビルドするためにいくつかの環境変数を設定する必要があります。
シェルでbashを使っている方は.bash_profileに(もしほかのシェルを使っていたら各々の設定ファイルに)以下の環境変数の設定を追加します。
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools
シェルにsource $HOME/.bash_profileと入力して上記で記述した設定をbashに適用させます。
最後にANDROID_HOMEがきちんと設定されているか確かめるためにecho $PATHと入力して環境変数に追加されているか確認します。
新しいアプリケーションの作成
React Nativeコマンドラインインターフェイスを使用して、 "AwesomeProject"(任意)という新しいReact Nativeプロジェクトを生成します。
$ react-native init AwesomeProject
Android搭載端末の準備
React Native Androidアプリを実行するには、Android端末が必要です。
普通のAndroid端末でもいいですが、仮想デバイスを使用することもできます。
普通の端末の使用
Android端末をお持ちの場合は、USBケーブルを使用してPCに接続します。
仮想デバイスの使用
・Android Studio で、[Tools] > [Android] > [AVD Manager] を選択します。
・ツールバーから [AVD Manager] AVD Manager アイコン をクリックします。
AndroidスタジオAVDマネージャ
Android Studioをインストールしたばかりの場合は、新しいAVDを作成する必要があります。
[Create Virtual Device ...]を選択し、リストから電話を選択して[next]をクリックします。
AndroidスタジオAVDマネージャ
「x86 Images」タブを選択し、Android 6.0（Google API）ターゲットでx86_64 ABI画像のMarshmallow API Level 23を探します。
React Nativeアプリケーションの実行
react-native run-androidReact Nativeプロジェクトフォルダ内で実行します。
$ cd AwesomeProject
$ react-native run-android
これで環境開発は完了です。