My Note Pad

Qiitaに書くほどでもない技術的なことや日々の雑感を書いていきます

GenymotionでReactNativeの動作環境を作った

iOSアプリ開発の学習をしていましたが、最近ReactNativeが活発になってきているので少し試してみようと思い、試してみることにした。

インストール方法

公式ページが分かりやすい

facebook.github.io

の手順で試してみた。

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

f:id:yuki10k:20170116192316p:plain

SDK Managerを選択

f:id:yuki10k:20170116192326p:plain

Launch Standalone SDK Managerを選択

f:id:yuki10k:20170116192335p:plain

必要なパッケージのを選択。

あとで出てくるけどAndroid SDK Build-Toolsが必要で、以下のバージョンをインストールしておく必要がある。
Android SDK Build-Tools 23.0.1

f:id:yuki10k:20170116192349p:plain

Package毎に Accept Licenseを選択してinstall

f:id:yuki10k:20170116192401p:plain

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のインストール

www.genymotion.com

※Virtual Boxが必要なので、別途インストールしておく。

公式ページからダウンロードする。
アカウントにサインインした状態で
Resources -> Fun Zone -> からPersonal Editionをダウンロードする。
※個人での利用に限り、無料で利用できる。

f:id:yuki10k:20170116192956p:plain

起動したら Addを選択。

f:id:yuki10k:20170116193003p:plain

利用したいVirtual Deviceを選択する。
Nexus 5Xとかを選んでおけば問題ない。
※サインインしている必要あり。

f:id:yuki10k:20170116193011p:plain

Virtual deviceの名前を入力し、Next。

f:id:yuki10k:20170116193020p:plain

バイス一覧に追加された。

f:id:yuki10k:20170116193027p:plain

そのままStartを選択すると、VMが起動する。

f:id:yuki10k:20170116193033p:plain

そのまま起動させておく。

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のアプリを起動することができた。

f:id:yuki10k:20170116193057p:plain