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

React Native - iOS開発のはじめの方

More than 3 years have passed since last update.

今日はiOSアプリをビルドしてみます。

必要な環境は下記になります。(2015年12月2日時点です。バージョンごとに変わっていくので、オフィシャルを参考にしてください。

  • OSX
  • Homebrew
    • flowとwatchmanの使用を推奨
  • Node4.0以上(Node5.0以上の場合はnpm2を推奨。npm3は遅いから)
  • iOSアプリはXcode7以上

私の環境は下記になります。npm3を使っていますが、現時点でやや問題があるようです。オフィシャルのドキュメント通りにnpm2の使用した方がいいかもしれません。

$ npm --version
3.3.6
$ node --version
v5.0.0
$ brew --version
0.9.5 (git revision 5ddbed; last commit 2015-10-30)
$ watchman --version
3.7.0
$ flow version
Flow, a static type checker for JavaScript, version 0.18.1

開発環境の構築

1) 下記のコマンドでReact Nativeのプロジェクト作成。

$ npm install -g react-native-cli
$ react-native init ReactNativeAdvent2015

2) Xcodeを立ち上げて、ReactNativeAdvent2015/ios/ReactNativeAdvent2015.xcodeprojをOpenする。

3) XcodeでBuild, Runすれば下記の画面が立ち上がる。
firstios.png

3) 任意のエディタでindex.ios.jsを開いてコーディング開始。command-RでJSを再読み込み。

JSファイルの配信の仕組み

XcodeでBuild, Runするとターミナルがたちが上がり、バックグランドでServerが起動します。このサーバ経由でJSファイルをロードします。AppDelegate.mを開くとjsCodeLocationを指定する箇所があり、ここを変更することで配信元の変更ができます。

# in AppDelegate.m
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];

デフォルトではlocalホストで配信し、イントラネットで手持ちのマシンのIPに設定すれば配信できます。

# in AppDelegate.m
jsCodeLocation = [NSURL URLWithString:@"http://192.168.1.25:8081/index.ios.bundle?platform=ios&dev=true"];

同様に外部サーバからも配信可能です。main.jsbundleをreact-nativeコマンドを使用して作成し、これをアップロードします。

$ react-native bundle --out /tmp/main.jsbundle --minify

一例ですが、Google Driveにアップロードし、Google Driveのホスティング機能を使って配信するにはAppDelegate.mを下記のように変更します。(FileIDは適宜変更してください)

jsCodeLocation = [NSURL URLWithString:@"https://www.googledrive.com/host/[fileID]?platform=ios&dev=true"];

アップロードするファイルごとにfileIDが変わってしまうのを防ぐためにはファイルを上書きします。ファイルのバージョン管理もされるので戻すことも簡単です。

このようにJSファイルの配信はとても簡単です。Xcodeでライブラリをリンクさせる等の変更を加えなければ、このJSファイルの変更だけでアプリの変更ができてしまいます。これはユーザによるテスト時にとても有効です。Production環境の運用はファイル自体の大きさが1M近くもあることもあり、モバイル環境ではやや厳しいかもしれません。(4G環境なら平気だと思いますが,低速のエリアをカバーすると難しくなりそうです)

以上で、iOS開発のはじめの方を終わります。明日はAndroid編をお届けします。

Why not register and get more from Qiita?
  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
No 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
ユーザーは見つかりませんでした