React-Native を実機で動かす

More than 1 year has passed since last update.

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

Kobito.5zP1PW.png

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

Enable Developer Mode on this Mac

Kobito.UCAAtM.png

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


Can't find 'node' error

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

Kobito.bw6cgf.png

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

スクリーンショット 2018-04-12 1.39.27.png


再度ビルド

まだエラーが出る場合

Kobito.VNzZzp.png

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

とか

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

スクリーンショット 2018-03-21 16.27.38.png

Kobito.cNOjoS.png

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


再度ビルド

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

IMG_7926.png


追記

信頼されていないデベロッパと表示された場合

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にします。

    Kobito.HN2UB2.png


  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;


デバッグ

スクリーンショット 2018-04-12 1.42.58.png

デバッグする対象を選びます。

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


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


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

信頼されていないデベロッパと表示されたときは、

「設定」>「一般」>「「プロファイルとデバイス管理」

Kobito.nFk4xk.png

Kobito.dQKUwA.png