前提

環境:"使い古した"Mac
いろいろ過去インストールしたものがあったりなどして一筋縄でいかなかった。
という人間のメモになります。

iOSはエミュレーター
Androidはエミュレーター+実機

quick startを始める

install

npm install -g create-react-native-app

プロジェクト作成からの早速エラー

create-react-native-app AwesomeProject
/opt/local/lib/node_modules/create-react-native-app/node_modules/fs-extra/lib/index.js:3
const assign = require('./util/assign')
^^^^^
SyntaxError: Use of const in strict mode.
    at exports.runInThisContext (vm.js:69:16)
    at Module._compile (module.js:432:25)
    at Object.Module._extensions..js (module.js:467:10)
    at Module.load (module.js:349:32)
    at Function.Module._load (module.js:305:12)
    at Module.require (module.js:357:17)
    at require (module.js:373:17)
    at Object.<anonymous> (/opt/local/lib/node_modules/create-react-native-app/build/index.js:233:16)
    at Module._compile (module.js:449:26)
    at Object.Module._extensions..js (module.js:467:10)

理由はnodeが古かった。

https://ja.stackoverflow.com/questions/29839/node-js%E3%81%A7const%E3%81%8C%E9%80%9A%E3%82%89%E3%81%AA%E3%81%84

nodeを更新する!

の前にnodebrewを入れる。

curl -L git.io/nodebrew | perl - setup

export PATH=$HOME/.nodebrew/current/bin:$PATH

nodeを更新

nodebrew install-binary

改めて、プロジェクト作成からの成功

npm install -g create-react-native-app
create-react-native-app AwesomeProject

Success! Created AwesomeProject

じゃあ始めようか

npm start

からのエラー。

quick startが使えないだと(Building Projects with Native Codeをなぞろう)…。

watchmanが入ってない様子。

brew install watchman

改めて、始めようか

npm start

できた。

iOSを始める

xcode いれて(更新して) cli tool入れて

run-ios

起動しました。

Androidを始める

エミュレーターの準備

cliでパスが通っていなかった?ので諸々パス追加

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
export ANDROID_SDK_ROOT=$ANDROID_HOME

avdmanager

エミュレーター起動せず。

Java周りを整理

IDEを使っていた為か、CLI周りの環境が整理されていなかった様子。

https://qiita.com/ringo/items/db58b34dc02a941b297f
apple側で入れていたjavaは使わなくなったようだ。
oracle側の
/Library/Java/JavaVirtualMachines/
こちらにインストールされるようになったしこちら側が使う方がよいようだ。

https://javaworld.helpfulness.jp/post-50/
ここの様子に似ている。

Javaのバージョン指定

JAVA_HOMEを設定することでそれが優先されるようになる。

export JAVA_HOME=`/usr/libexec/java_home -v 1.8`

java_homeコマンドを実行してバージョン指定できる
今回は1.8を使います。

emulatorにパスを通す

ERROR:android/android-emu/android/qt/qt_setup.cpp:28:Qt library not found at ../emulator/lib64/qt/lib
https://stackoverflow.com/questions/42554337/cannot-launch-avd-in-emulatorqt-library-not-found

bash_profileに以下(強制的に、ですね?)

function emulator { cd "$(dirname "$(which emulator)")" && ./emulator "$@"; }

おもむろにexpoをinstall

expoはlocalnetwork内の端末にアプリを反映するツール

npm install -g exp
npm install -g react-devtools

今度こそ run-android

エミュレーターは先に起動をしておかなければいけないみたい。
@以降はエミュレーターで登録した環境?名

emulator @Pixel_XL_API_26
react-native run-android

emulatorで起動できた!

Android実機で起動

実機とmacをUSBでつないで

run-android

表示されました!!

React Native で iOS,Androidでアプリが起動するまで

前提