search
LoginSignup
3

More than 5 years have passed since last update.

posted at

updated at

React素人がReactNativeでAndroidアプリ作成の夢を見て環境設定した

この記事は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

サクッと追加インストールしましょう。(そこそこ時間がかかります)
スクリーンショット 2016-11-30 11.19.00.png

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をインストールします。

インストール後、同コマンドを実行すると。。。
スクリーンショット 2016-12-01 15.44.38.png
無事起動できました!

引き続き、チュートリアルで勉強中です。。。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
3