ReactNativeを使ってみようと思いたったので、まずサンプルを動かしてみた時に色々面倒だったのでメモ。
※投稿時は、ReactNative 0.30を使用
ReactNativeのインストール
まずは環境をインストール
※ググると色々出てきますが、私は本家を参考にインストールしました。
http://facebook.github.io/react-native/docs/getting-started.html
上記では簡単なサンプル「AwesomeProject」が使えます。
サンプルをダウンロード
ここでは、サンプル集を動かすまでのメモなので
https://github.com/facebook/react-native
こちらをcloneまたはDownloadして使用しました。
※ダウンロード先は任意です。
サンプルは、Examplesフォルダの中にある「UIExplorer」を使用します。
UExplorerをiOS Simulatorで動かす
UIExplorer.xcodeprojをXcodeでオープン
このままSimulatorを選択して実行
赤い画面でログが表示されたんですが、色からして正常ではないですよねー
なぜだ (ﾟｰﾟ*?)
ググって調べてみた結果、以下をちょっと変更する必要があるようでした。
NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"Examples/UIExplorer/js/UIExplorerApp.ios" fallbackResource:nil];
まずは、こちらに変更
NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"http://localhost:8081/Examples/UIExplorer/js/UIExplorerApp.ios" fallbackResource:nil];
これだけでもダメでした。
何が足りないのか。。。赤い画面のエラーログを見ながら色々試した結果
以下のことを行ったら私の環境では動きました。
最初にclone or ダウンロードした中にある「node_modules」フォルダを
UIExplorer配下にある「js」フォルダにコピー
（違っていたらスミマセン）
これでSimulatorを選択して実行
動きました！ (*ﾟ∀ﾟ)ﾉ
いやーこれだけで時間かかってしまいました。。。
続いて、実機で動かすことに
UExplorerをiOS実機で動かす
今回はiPhone6sで試しました。
localhost:8081ここは怪しいと思いつつ
まずは実機に向けて実行してみました。
が、やっぱり動きませんでしたー
予想通りだったけど、なぜだ (ﾟｰﾟ*?)
こちらもググってみたら
ここを変更する必要があったみたい。
※参考にさせてもらいました。
http://qiita.com/osamu1203/items/6b5852603186ba7e6f05
jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
main.jsbundleを作成し、xcodeprojに含める必要があります。
上記の記事を参考に作成したmain.jsbundleを任意のフォルダに置き、
xcodeprojに含めてビルド
さぁこれで再実行！
また赤画面が、、、今度はなんだろう
ググってみてstackoverflowなど色々あった試したが解決せず、、、
試しにmain.jsbundleを作成する際のパラメータを一部変更
$ curl 'http://localhost:8081/index.ios.bundle?dev=true&minify=true' -o iOS/main.jsbundle
これで作成したmain.jsbundleを含めてリビルド
実機で実行してみたら
動きました！ (*ﾟ∀ﾟ)ﾉ 
本当にこれで合っているのか、、、
まぁ動いたんで、一旦動きを見たりする分にはいいのかなぁと。
と思ってたんですが、、、
Debug実行でしか動かない
リストにある項目で動かないことが多い
などの問題が出てくるので、まだまだ道のりは長そうです。。。