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

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

sugasaki
個人的なメモが多いです。 書いてる事は個人の見解であり所属する組織の公式見解ではありません
https://sugasaki.com/
runners
スポーツで世界を良くしたいエンジニアチーム。応援navi、.finisher、run&といった製品開発をしています!
https://www.wantedly.com/projects/167082
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