仕事で新しいサービスを作る事になったのでreactで遊んでみた。

Reactと戯れる

まずはinstall

前提条件として

macであること

というのがあるのだが、それ以外でのやり方は知らない。

android版も出たからwindows機でも動くのかな。

Homebrew — The missing package manager for OS X を入れる。
Node.js のv4以上を入れる。
sh brew install watchman を入れる
sh brew install flow を入れる。

こんなところかな。

watchmanとflowについてはよくわかっていないけど、軽く眺めてみたところファイル監視とjsの静的なファイルチェッカーのようだね。

iosとandroidのプラットフォーム準備

というかsdk入れる。

iosはxcodeをandroidはandroid SDKを入れる。

今回は入っていたので省略。

プロジェクトの作成

npm install -g react-native-cli
react-native init AwesomeProject

コマンドラインツール入れて、react-nativeコマンドでプロジェクト作成。

IOSでの起動

AwesomeProject/iosの下にAwesomeProject.xcodeprojがあるのでこれをxcodeで起動。

するとパッケージ構成やら実行構成やらがもろもろ詰め込まれたものが出てくる。

全然追えてないけど暇なときに漁ってみる事にします。

さて、実行といえばxcode上で[⌘ + R]くらいです。

するとios emulatorが立ち上がってアプリが確認できるはず。

ちなみにこれから手を加えるであろうjsファイルは

AwesomeProjectの直下にindex.ios.jsというファイルがあり、本体はこれです。

androidで起動

react-native run-android

というコマンドを実行。多分コンパイルとか勝手にやってくれているんだと思う。

私は

ANDROID_HOMEが見つからないよ

って怒られたので、install pathである/User/username/Library/Android/sdkを指定。

が最終的に起動が遅いせいで

device not found

とのこと。

github.com

ググったら出てきた。

んじゃ仕方ないからandroidだけ実機debugとするか。

いつもそうだけどw

android 実機デバッグ

やり方

実機接続
sh react-native run-android
多分赤い画面が出力される。（実行したconsoleには特にエラーは出ず）これに関しては知らなかったけど多分reactのデバッグの仕組みとしてサーバーにあるjsをロードして表示してて、実機デバッグするとサーバーの場所が分からなくなるから失敗してるってことかと。
おもむろに端末を振る
Dev Settingsを選択
Debug server host for deviceを選択し、実行しているサーバーのIPアドレスを入力
再度ロードすると表示されるかと。

一応iosでも実機デバッグしておくか。

AwesomeApp/ios/AwesomeApp/AppDelegate.m

ここのlocalhostを開発中のPCのIPアドレスに置換。

macに挿して起動するだけ。

最近のアップデートでprofile入れなくても実機デバッグが可能になったみたい。

何かしらエラーが出たらfix issueで解決。

とはいえandroidやらjavaは割と触っているけどiosはまだ全然だし、xcodeとも仲良くなれる気があまりせんなー。

bo-tech

heart and tech with love.