GenymotionでReactNativeの動作環境を作った
iOSアプリ開発の学習をしていましたが、最近ReactNativeが活発になってきているので少し試してみようと思い、試してみることにした。
インストール方法
公式ページが分かりやすい
の手順で試してみた。
Node, Watchmanのインストール
nodeはanyenvで入れているのでスキップ。
watchmanはFacebook製のファイルシステムの変更を監視するツールらしい。
$ brew install watchman
React Native CLIのインストール
npmを使って
$ npm install -g react-native-cli
Android Studioのダウンロードとインストール
Android Studioは既に入っているのでスキップ。
JavaがJDK8以上が必要らしいので、バージョンだけ確認。
$ javac -version
javac 1.8.0_102
インストール済みのSDKなどはこちらから確認できるので状況に応じて追加でインストールする。
Android Stuid起動画面の右下のConfigure
SDK Managerを選択
Launch Standalone SDK Managerを選択
必要なパッケージのを選択。
- Google APIs
- Intel x86 Atom System Image
- Intel x86 Atom_64 System Image
- Google APIs Intel x86 Atom_64 System Image
あとで出てくるけどAndroid SDK Build-Toolsが必要で、以下のバージョンをインストールしておく必要がある。
Android SDK Build-Tools 23.0.1
Package毎に Accept Licenseを選択してinstall
ANDROID_HOMEの設定
手順では~/.bashrcですがzshを使っているので、~/.zshrcに設定した。
export ANDROID_HOME=~/Library/Android/sdk export PATH=${PATH}:${ANDROID_HOME}/tools export PATH=${PATH}:${ANDROID_HOME}/platform-tools
ターミナルを再起動するか、sourceで読み込み、確認する。
$ source ~/.zshrc $ env | grep ANDROID ANDROID_HOME=/Users/USER_NAME/Library/Android/sdk
Genymotionのインストール
※Virtual Boxが必要なので、別途インストールしておく。
公式ページからダウンロードする。
アカウントにサインインした状態で
Resources -> Fun Zone -> からPersonal Editionをダウンロードする。
※個人での利用に限り、無料で利用できる。
起動したら Addを選択。
利用したいVirtual Deviceを選択する。
Nexus 5Xとかを選んでおけば問題ない。
※サインインしている必要あり。
Virtual deviceの名前を入力し、Next。
デバイス一覧に追加された。
そのままStartを選択すると、VMが起動する。
そのまま起動させておく。
ReactNativeアプリケーションの作成と実行
適当なディレクトリに移動して、以下のコマンドを実行する
$ react-native init AwesomeProject
$ cd AwesomeProject
$ react-native run-android
ここで起動できなくてかなりハマった。
Android SDK Build-tools versionは23系の最新を使えばいいと思っていたので23系の最新を入れていたけど、実際は以下のバージョンで固定だった。
Android SDK Build-tools version 23.0.1
23.0.1をインストールすると無事にGenymotion上でReactNativeのアプリを起動することができた。
