Help us understand the problem. What is going on with this article?

ReactNativeのサンプルをiOSで動かしてみたメモ

More than 3 years have passed since last update.

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を選択して実行
赤い画面でログが表示されたんですが、色からして正常ではないですよねー
IMG_0042.PNG

なぜだ (゚ー゚*?)

ググって調べてみた結果、以下をちょっと変更する必要があるようでした。

AppDelegate.m
NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"Examples/UIExplorer/js/UIExplorerApp.ios" fallbackResource:nil];

まずは、こちらに変更

AppDelegate.m
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

AppDelegate.m
jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

main.jsbundleを作成し、xcodeprojに含める必要があります。
上記の記事を参考に作成したmain.jsbundleを任意のフォルダに置き、
xcodeprojに含めてビルド

さぁこれで再実行!

f2ec62d0-450b-11e6-9b6c-3f9692c265d0.png

また赤画面が、、、今度はなんだろう
ググってみてstackoverflowなど色々あった試したが解決せず、、、

試しにmain.jsbundleを作成する際のパラメータを一部変更

$ curl 'http://localhost:8081/index.ios.bundle?dev=true&minify=true' -o iOS/main.jsbundle

これで作成したmain.jsbundleを含めてリビルド
実機で実行してみたら

動きました! (*゚∀゚)ノ :tada:

本当にこれで合っているのか、、、
まぁ動いたんで、一旦動きを見たりする分にはいいのかなぁと。

と思ってたんですが、、、
Debug実行でしか動かない
リストにある項目で動かないことが多い
などの問題が出てくるので、まだまだ道のりは長そうです。。。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away