React-Native を実機で動かす



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

## 公式ページ

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


[Running On Device · React Native](https://facebook.github.io/react-native/docs/running-on-device.html)



## Apple Developer account

[Apple Developer account](https://developer.apple.com/)が未登録の場合には登録する。

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



## XCode


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


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

![Kobito.5zP1PW.png](https://qiita-image-store.s3.amazonaws.com/0/49910/c9aa87bb-15ce-bb46-2a89-e621bc53d6ca.png "Kobito.5zP1PW.png")

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



Enable Developer Mode on this Mac
![Kobito.UCAAtM.png](https://qiita-image-store.s3.amazonaws.com/0/49910/db72866f-a146-d7f6-a071-b25a1c1f2fbe.png "Kobito.UCAAtM.png")



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



## Can't find 'node' error

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

![Kobito.bw6cgf.png](https://qiita-image-store.s3.amazonaws.com/0/49910/af858c58-a044-85b3-da7e-46abb184024d.png "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](https://qiita-image-store.s3.amazonaws.com/0/49910/444c3516-cafe-2cd9-c8c9-31ca8a07e0d7.png "スクリーンショット 2018-04-12 1.39.27.png")




## 再度ビルド

まだエラーが出る場合

![Kobito.VNzZzp.png](https://qiita-image-store.s3.amazonaws.com/0/49910/7b0ffbca-bf95-2889-e5be-c89c7f0ce050.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](https://qiita-image-store.s3.amazonaws.com/0/49910/ebdc7c63-6e3e-e6db-040d-36a0c5175040.png "スクリーンショット 2018-03-21 16.27.38.png")


![Kobito.cNOjoS.png](https://qiita-image-store.s3.amazonaws.com/0/49910/38239509-5df9-853a-4a99-81d518ef5eca.png "Kobito.cNOjoS.png")

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


## 再度ビルド

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


![IMG_7926.png](https://qiita-image-store.s3.amazonaws.com/0/49910/a0bfe5c5-8011-39d4-09a9-f04aa57a0218.png "IMG_7926.png")



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



# Productionとして実機で動かす

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

↓の下の方「Building your app for production」の章を参照しながら進む
[Storybook \- UI dev environment you'll love to use](https://storybook.js.org/)



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

2. Configure release scheme
リリースモードでビルドします。
メニューからProduct → Scheme → Edit Schemeでビルド切り替え画面が出てきます。
Build ConfigurationをReleaseにします。
![Kobito.HN2UB2.png](https://qiita-image-store.s3.amazonaws.com/0/49910/2fb2f2cf-f22a-b889-644f-793a5260b130.png "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](https://qiita-image-store.s3.amazonaws.com/0/49910/8d5973ef-b387-0ac9-d0d0-0d11c6eaba01.png "スクリーンショット 2018-04-12 1.42.58.png")

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

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



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

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


![Kobito.nFk4xk.png](https://qiita-image-store.s3.amazonaws.com/0/49910/22fa8fcc-8066-4c34-6505-cdc987561d6b.png "Kobito.nFk4xk.png")


![Kobito.dQKUwA.png](https://qiita-image-store.s3.amazonaws.com/0/49910/879523a9-7216-fb89-8b2c-cf17f28296ff.png "Kobito.dQKUwA.png")