ReactNativeで作成したアプリをandroidシミュレータ「Genymotion」で起動する MAC編

よろしければシェアお願いいたします

最近ReactNativeに手を出し始めたのですが、
iOSと違いandroidでエミュレータ確認までたどり着くまでに苦労したので記事にしておきます。

動作環境
・Node.js v6.9.1

では早速進めていきましょう。

React Native CLIのインストール

好みで選んでください。

watchmanをインストール

Javaのインストール

まずJavaが入っているか確認しましょう。

入っていなかった方は公式からダウンロードしましょう。
ここからダウンロード出来ます。

ダウンロード後、そのままデフォルトで最後まで進めてしまって問題ないです。

Android Studioのインストールと設定

こちらも公式からダウンロードしましょう。

こちらもダウンロード後、デフォルトで最後まで進めてしまって問題ないです。

Android Studioが起動できたら、細かい設定をしていきます。

赤枠の部分をクリックし、「SDK Manager」を選ぶと下記のような画面が表示されると思います。

「Show Package Details」をクリックしてから、
今回使用するシミュレータと同じandroidバーションを選びます。(今回はandroid6.0)
その他、下記についてもチェックを入れてください。

  • Google APIs
  • Android SDK Platform 23
  • Intel x86 Atom_64 System Image
  • Google APIs Intel x86 Atom_64 System Image

チェックを入れ終えたら、「Apply」でインストールしてください。
次に、Android SDK Build-Toolsのバージョンを確認します。
react-nativeのドキュメントでは、

hen make sure that Android SDK Build-Tools 23.0.1 is selected.

とありますので

タブを切り替えて、23.0.1にチェックが入っていることを確認してください。

環境変数ANDROID_HOMEの設定

~/.profile に下記を追記してください。
(ファイルがない場合は新規作成)

保存したのちターミナルを再起動かsourceで変更を反映させます。

設定したパスが表示されたら反映されています。

GenymotionとVirtualBoxのインストール

androidシミュレータであるGenymotionをインストールします。
公式サイトからダウンロード出来ます。

アカウントの登録が必要なのですが、今回手順は省きます。

次にVirtualBoxも公式サイトからダウンロードしましょう。
特に設定は必要ないです。

ダウンロード後Genymotionを立ち上げ、動作確認に使用するデバイスを選んでいきます。

ディレクトリにて下記を実行します。

run-androidした歳にターミナルが一つ開きますが、消さないでください。

こんな画面が表示されたら成功です!
お疲れ様でした。

このままindex.android.jsを書き換え、リロードすると
即座に画面に反映されます。
確認がとっても楽です!

スポンサーリンク
広告1
広告1

よろしければシェアお願いいたします

フォローする

スポンサーリンク
広告1