React NativeをAdnroidエミュレータで動かす

2019-10-23

React NativeをAdnroidエミュレータで動かす


このエントリーをはてなブックマークに追加

react-nativeをインストールする

yarnの場合

yarn global add react-native

npmの場合

npm -g install react-native

Android Studioの設定

Android Studioがインストールされていなければインストールしましょう。
https://developer.android.com/studio/?hl=ja

エミュレータの設定

Android Studio setup
Android Studioの「Configure」から「AVD Manager」を選択します。

AVD Manager
追加したいデバイスを選択してDownloadをクリックします。

Emulator Download
ダウンロードが開始されるのでしばらく待ちます。

Your Virtual Devices
インストールが完了したら実行して起動するか確認します。

React Nativeの設定

まだプロジェクトがない場合は雛形を作成

react-native init

プロジェクト内の「android」ディレクトリに「local.properties」というファイルを作成し、SDKのパスを指定
SDKのパスはAndroid Studioから[File]->[Other Settings]->[Default Project Structure]で確認できる

sdk.dir = /Users/[ユーザ名]/Library/Android/sdk

Windowsの場合は下記のようにSDKのパスを指定

sdk.dir = C:\\Users\\[ユーザ名]\\AppData\\Local\\Android\\Sdk

アプリを起動してみる

AVD Managerからエミュレータを立ち上げた状態で下記コマンドを実行する

react-native run-android

下記のようにアプリが立ち上がれば完了

Welcome to ReactNative

うまくいかない場合

パスが指定されていない場合はパスを指定してあげる

export ANDROID_HOME=~/AppData/Local/Android/Sdk
export PATH=%PATH%;%ANDROID_HOME%\ tools;%ANDROID_HOME%\ platform-tools