弊社でアプリ開発にReactNativeを採用することになったので、まずは、ローカル環境でのエミュレータ開発を行うために、検証した結果の導入手順を忘れないようにメモっておきます。
前提条件
- Node.jsがインストールされている
- npmが使える
用意するもの
- AndroidStudio（Android SDK）
- Expo.io
検証環境
MacBook Pro (Retina, 13-inch, Early 2015)
macOS Sierra バージョン10.12.5
AndroidStudioのダウンロードとエミュレータの作成
- こちらからAndroidStudioをダウンロードして手順にしたがってダウンロードしてください
- 基本的に全てデフォルトのままでok
- Configure > SDK Manegerを開いて必要なSDKを入れる（ロリポップより上に全部チェックつけとけばOK）
- Start a new Android Studio Projectで適当なプロジェクトを作る
- プロジェクトができたら、ツールバーの Tools > Android > AVD Manegerを開く（Android Virtual Device の略)
- Create Virtual Device... を選ぶ
- Nexus 5X（エミュレートしたい端末） を選んで次へ
- Nougat（上記の搭載OS）をダウンロードして次へ
- AVD name をわかりやすい名前に変更（※ あとでコマンドラインでここで決めたデバイス名を打つので打ちやすい長さがいい）
- Finishで終了
npmでCRNA（create-react-native-app）のインストール
$ npm install -g create-react-native-app
$ cd アプリを作りたいフォルダ
$ create-react-native-app アプリ名
なんか色々ダウンロードしてよしなにやってくれる
Androidエミュレータを起動できるようにする
1.SDKを入れたフォルダを確認する
AndroidStudio > Preference > Appearance & Behavior > Sttings > Android SDK
上記に書いている場所パスが書いてある。
2.sdkフォルダ内部のplatform-toolsとtoolsにパスを通す
パスの通し方は、調べてくだしあ
3.パスが通ったか確認する
$ adbと$ androidと$ emulatorコマンドが使えるか確認
今回はemulatorコマンドしか使いませんが、
adb、androidコマンドも今後開発で
使うのでついでにパスを通しておきます。
Expo.ioでReactNativeアプリをエミュレータに表示する
- こちらからExpo.ioをダウンロードしてインストール
- 会員登録する。
- コマンドラインからAndroidエミュレータを起動。
-
$ emulator <AVD name>で最初に作成した仮想端末を起動 - Expoを起動し、Project > Open Project から、create-react-native-appで作成したアプリを開く
- buildが終了すると右上のDeviceボタンが押せるようになるので、そこからAndroidを選択
- エミュレータ上で、Expoアプリがインストールするか聞かれるのでインストール。
- HelloWorld!!
起動中のReactNativeを編集すればリアルタイムに、
エミュレータに反映されます。
注意としては４と５の順序が逆転すると起動できません。
確実にエミュレータを起動した後に、Expoを開く必要があります。
初めて書いた記事なので、お手柔らかにお願いします。