ReactNative動かしてみる

なんか開発すっかーって事です。

モバイルのアプリ作ってみようかな。

ということで持て余していたMacを掘り出して作業開始。

作業環境

OSX 10.11.6
Android

homebrewをインストール

homebrewが入ってなかったので公式サイトへ brew.sh

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”

インストール完了。

AndroidStudioをダウンロード

これも入ってなかったので公式サイトへ developer.android.com

dmgを展開してセットアップ

AndroidSDKもホーム配下に適当に配置。

ReactNativeをインストール

同じく公式を参考に作業を進めていく facebook.github.io

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

これで多分大丈夫

プロジェクトを適当に作成

これも公式チュートリアルそのまま。

$ react-native init AwesomeProject
$ cd AwesomeProject
$ react-native run-android

とりあえずrun

$ react-native run-android
JS server already running.
/bin/sh: adb: command not found

adbがシェルから叩けない様子なのでSDKインストールフォルダから探す。

$ find Library/Android/sdk/ | grep adb
Library/Android/sdk//platform-tools/adb
Library/Android/sdk//platforms/android-24/data/res/drawable-nodpi/stat_sys_adb.xml

いた！bash_profileにplatform-toolsを追記

$ find Library/Android/sdk/ | grep adb | head -n1 | sed -e s/adb// | sed -e "s/^/export PATH=\$PATH:~\//" >> ~/.bash_profile
$ source ~/.bash_profile
$ adb devices
List of devices attached

adb動作確認できたのでもっかいrun

$ react-native run-android
* What went wrong:
A problem occurred evaluating project ':app'.
> SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.

sdk.dirかANDROID_HOMEが無いとSDKの場所わからないとおっしゃりやがる

$ env | grep ANDROID
ANDROID_SDK_ROOT=/Users/hoge/adt-bundle-mac-x86_64-20140702/sdk

ANDROID_HOME定義されてませんね。

適当にbash_profileに追加

$ echo "export ANDROID_HOME=/Users/hoge/Library/Android/sdk" >> ~/.bash_profile
$ source ~/.bash_profile

もっかいrun

$ react-native run-android
* What went wrong:
A problem occurred configuring project ':app'.
> failed to find target with hash string 'android-23' in: /Users/hoge/Library/Android/sdk

APIレベルで引っかかっってる模様。 SDKManagerから23をインストール

$ react-native run-android
* What went wrong:
A problem occurred configuring project ':app'.
> failed to find Build Tools revision 23.0.1

BuildToolのインストール忘れてたのでSDKManagerからBuildToolsを入れる。

事前に確認するならここに定義されてる

android/app/build.gradle

またもやrun

$ react-native run-android

動きました。

f:id:odoo:20160922235522p:plain

感想

普通にAndroidのビルド環境あればすぐ動きそうでした。

さて、何作ろうかな。

正直、アプリ開発はかじったぐらいで

nodeもjsもロクにしたことがない状態でreactはハードル高いだろうと思う。

勉強する事多くていい感じですね。

以上、ReactNativeをざっと動かしてみました。