React-Native を実機で動かす

React Native を実機で動かします。

公式ページ

以下の解説にそって進めます。

Running On Device · React Native

Apple Developer account

Apple Developer accountが未登録の場合には登録する。

Register for an Apple developer account if you don't have one yet.

XCode

AwesomeProject/iosフォルダに入る。
AwesomeProject.xcodeprojを実行する。→XCodeが起動する。

左側メニューから　を選択するとプロジェクト設定画面が現れる。
Generalタブ→Signing

アカウント一覧が表示されていない場合にはAdd AcountでAppleIDにログインする。

Enable Developer Mode on this Mac

エラーが出たらBundle Identifierを適当なものに書き換える

Can't find 'node' error

error: Can't find 'node' binary to build React Native bundle

Bundle React Native code and image設定のNodeパスを変更する。

export -p
でNodeのパスを確認
nodebrewを入れている場合は以下のような感じで表示されました。

/Users/ユーザー名/.nodebrew/current/bin

という事で以下のように変更

export NODE_BINARY=node
↓
export NODE_BINARY=/Users/ユーザー名/.nodebrew/current/bin/node

再度ビルド

まだエラーが出る場合

Code Signing Error: Code signing is required for product type 'Unit Test Bundle' in SDK 'iOS 11.2'

とか

Targetからテストプロジェクトを選ぶ。Targetsが出てないときは↓画像の赤丸部分をクリック

General＞SigningからTeamを設定する。

再度ビルド

今度は手元のiPhoneでアプリが自動で立ち上がりました。

追記

信頼されていないデベロッパと表示された場合
iPhoneの設定＞一般＞プロファイルとデバイス管理　から設定を変更することで解決

Productionとして実機で動かす

上記までのはデバッグ環境でiPhoneとMacとが同一ネットワークに無いと動かない。
外に持ち出してテストしたい時などはProductionとしてアプリを動作するように設定する。

↓の下の方「Building your app for production」の章を参照しながら進む
Storybook - UI dev environment you'll love to use

1. Enable App Transport Security
   テストを簡単にするためにHTTPを有効にしてるから、本番の時には無効にするようにと書いてあります。
   テストの場合にはひとまずそのまま進みます。

2. Configure release scheme
   リリースモードでビルドします。
   メニューからProduct → Scheme → Edit Schemeでビルド切り替え画面が出てきます。
   Build ConfigurationをReleaseにします。
   

3. Configure app to use static bundle
   デバッグモードではMacから都度JSファイルをダウンロードしているようです。
   ここではその設定を変更し、iPhoneのアプリに詰め込みます。

AppDelegate.mを表示し、jsCodeLocationらへんを変更します。

jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

を↓に変更する。

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

スプラッシュ画面

アプリサイズが大きいと起動に時間がかかるからスプラッシュ画面を表示できますとのこと

  // Place this code after "[self.window makeKeyAndVisible]" and before "return YES;"
  UIView* launchScreenView = [[[NSBundle mainBundle] loadNibNamed:@"LaunchScreen" owner:self options:nil] objectAtIndex:0];
  launchScreenView.frame = self.window.bounds;
  rootView.loadingView = launchScreenView;

デバッグ

デバッグする対象を選びます。
接続していれば実機が表示されるはずなので実機を選びます。

1. Build app for release
   ビルドしてうまくいけば▶︎ボタンを押してiPhoneに転送します。
   AppDelegate.mを開いたときにビルドエラーになりましたが、ファイルを閉じたり開いたりしてるうちにエラーが消えました。なんだったんだろう。

信頼されていないデベロッパ

信頼されていないデベロッパと表示されたときは、
「設定」>「一般」>「「プロファイルとデバイス管理」