この記事はmediba advent calendar 2016 3日目です。
mediba制作部の土方です。
- Reactを触ったことがない
- Javascriptはわかる
そんな私がReactNativeを使ってネイティブアプリ作成に挑戦したく、とりあえず環境設定完了までの記録です。
実際に作成した記録は完成したらということで。。。
環境
- Mac OX X El Capitan 10.11.6
- node.js v4.4.2
- Android Studio 2.2.2
作成するもの
http://ceblog.mediba.jp/
当社のCreator×EngineerBlogのビューア作成を目指します。
環境設定
FacebookのGettingStartedページを参考に、開発環境を設定します。
設定でハマッた点
AndroidStudioのパス
GettingStarted - 4. Set up the ANDROID_HOME environment variable
に、パスを通す記述があります。
~/.bashrcに記述するように記載されていますがMacのデフォルトは~/.bash_rcを読んでくれません。
~/.bash_profileに
source ~/.bashrc
を記載し、パスを通しました。
Androidエミュレータの作成
GettingStartedに記載されている、
$ android avd
からAndroidVirtualDeviceManagerを実行し、CreateAVDしようとすると
CPU/ABIがNo system images installed for this targetとなり選択できませんでした。
これは、3. Install the Android 6.0 (Marshmallow) SDKで指示されていたSystem Imageがインストールされていない場合に発生するものです。
SDKのインストール時にデフォルトのままですとインストールされませんので、SDKと一緒にインストールするか、Android SDK Managerから追加でインストールする必要があります。
パスが通っていれば下記コマンドでAndroid SDK Managerを起動することが出来ます。
$ android
サクッと追加インストールしましょう。（そこそこ時間がかかります）
Androidエミュレータが重い
AndroidVirtualDeviceManagerからデフォルト設定でエミュレータを作成、起動するとものすごく動作が重いです。
- Intel x86 Emulator Accelerator(HAXM installer)をインストールしておく
- VirtualDevice作成時に下記設定とする
- CPU/ABI - Intel Atom(x86)を選択
- Emulation Options - Use Host GPUをON
ことで最適化され、快適に動作させることができます。
エミュレータを起動
AndroidVirtualDeviceManagerを起動して、エミュレータを選択して、Startボタンを押下
なんてダルくて毎回やってられないです。
コマンドで一発起動しましょう。
$ ~/Library/Android/sdk/tools/emulator -avd [AVD Name]
パスが正しく通っていれば
$ emulator -avd [AVD Name]
で起動できます。
Project作成〜起動
任意のフォルダでinitializeし、サンプルコードをビルド&実行します。
このときAndroidエミュレータを起動させておく必要があります。
$ emulator -avd Nexus6
$ react-native init medibaBlog
$ cd medibaBlog/
$ react-native run-android
エラーが出てしまいました。
FAILURE: Build failed with an exception.
* What went wrong:
A problem occurred configuring project ':app'.
> failed to find Build Tools revision 23.0.1
Android SDK Managerを起動し、Android SDK Build-tools 23.0.1をインストールします。
インストール後、同コマンドを実行すると。。。
無事起動できました！
引き続き、チュートリアルで勉強中です。。。