UTALI

みんなの役に立つ情報をどんどん公開していきます

React NativeでのAndroidアプリ作成入門 | 環境構築編

Facebookが開発したReactJSを利用してAndroid/iOSのクロスプラットフォーム開発ができるReact Nativeがあります。

BSDライセンスで公開されているオープンソースであり、利用に特に制約はありません。

今回はHackerNews-React-Nativeという有志が作成したデモアプリをAndroidの仮想マシンで動作させるところまで実行します。

今回のデモ環境

  • OS: MacOS Sierra 10.12.3
  • Node.js 7.10.0

もしNode.jsがインストールされていなければHomebrewでダウンロードしておきます。


brew install node


 開発に必要なツールをインストール

brew install watchman
npm install -g react-native-cli

1. Android Studioをダウンロードする

最初にAndroid Studioの最新版を公式から落としてきます。

f:id:mochizuki_p:20170509164327p:plain

MacOSであれば

ダウンロード > ..

以下にインストーラがダウンロードされるはずです。これを起動して解凍、

f:id:mochizuki_p:20170509164348p:plain

Applicationフォルダにコピーします。

f:id:mochizuki_p:20170509164359p:plain

この時以下の選択肢が提示されるはずです。

f:id:mochizuki_p:20170509164419p:plain

もし古いバージョンのAndroid Studioが事前にインストールされている場合は、一番上の選択肢を選ぶことで、事前の設定を受け継ぐことが可能です。

ここまでで問題が発生しなければLaunchPadからAndroid Studioを起動できるはずです。

f:id:mochizuki_p:20170509164431p:plain

またAndroid Studioのコマンドラインツールを利用できるようにパスを通しておきます。

export ANDROID_HOME=${HOME}/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools

bash_profileに以下を追記しておくといいでしょう

ANDROID_HOME=${HOME}/Library/Android/sdk
PATH=${PATH}:${ANDROID_HOME}/tools
PATH=${PATH}:${ANDROID_HOME}/platform-tools

2.必要なライブラリをインストールする。

Configure > SDK Managerを立ち上げて、

f:id:mochizuki_p:20170509164447p:plain

Appearance & Behavior > System Settings > Android SDKを選択

SDK Toolsを選択して、画面右下のShow Package Detailsのクリックボックスを押します。

今回インストールするもの

  • Android Emulator
  • Android SDK Build Tools 25.0.2
  • Android SDK Platform-Tools 25.0.3
  • Android SDK Tools 26.0.2
  • Intel x86 Emulator Accelerator(HAXM installer) 6.1.1

利用規約に同意を求められるのでAcceptを選択してNextを押します。

f:id:mochizuki_p:20170509164457p:plain

問題が発生しなければ次へ

またReact NativeはデフォルトでSDK PlatformとしてAndroid 6.0を利用します。利用するのは・・

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

です。

これも同様にインストールします。

3.AVDをインストールする

Androidの仮想マシンをインストールします。

適当なプロジェクトを立ち上げて

f:id:mochizuki_p:20170509164616p:plain

Tools > Android > AVD Manager

を選択

次にCreate Virtual Deviceを選択

f:id:mochizuki_p:20170509164632p:plain

仮想マシンを選択します。

f:id:mochizuki_p:20170509164645p:plain

今回はNexus 6Pを選択して、Nextを押す

次にはシステムイメージ(Androidのバージョンを選択します)

推奨はAndroid 7.1.1 Nougatだそうですが、今回は、6.0 Marshmallowを利用することにします。

結構重いので高速回線で利用するようにしてください。

f:id:mochizuki_p:20170509164709p:plain

インストールが完了したらこのような画面に遷移します。

f:id:mochizuki_p:20170509164732p:plain

Actionsの欄にある横向きの矢印をクリックすると仮想マシンが起動します。

f:id:mochizuki_p:20170509164737p:plain

React Nativeの準備をする

まずは任意の作業用ディレクトリにHackerNews-React-Nativeを落とします。

github.com

git clone https://github.com/iSimar/HackerNews-React-Native.git
cd HackerNews-React-Native

このレポジトリのandroidディレクトリをAndroid Studioでオープン、仮想マシンを立ち上げます。

そしてコマンドラインから以下を入力してReact Nativeアプリを起動します。

sudo react-native run-android

通常はこれで上手くいくはずなのですが今回はgradleのバージョンが古いためにエラーが発生しました。

この場合はAndroid StudioのMessage Gradle Syncの欄から

f:id:mochizuki_p:20170509164849p:plain

Gradleのバージョンを修正することが可能です。

そして再び上記のコマンドを入力

f:id:mochizuki_p:20170509164958p:plain

上手くいけば仮想マシンに自動的にアプリが立ち上がります。

f:id:mochizuki_p:20170509164857p:plain

特に問題なく動作します。

f:id:mochizuki_p:20170509164921p:plain

f:id:mochizuki_p:20170509164923p:plain

iOS版もアップする予定です。