読者です 読者をやめる 読者になる 読者になる

React-nativeで作ったiOSアプリを実機テストする

React-native

React-nativeで作ったiOSアプリを、実機テストしてみようとしたら、こんなエラーが出た。

f:id:uraway:20151121164634j:plain


AppDelegate.mを見てみる。

/**
 * Copyright (c) 2015-present, Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 */

#import "AppDelegate.h"

#import "RCTRootView.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;

  /**
   * Loading JavaScript code - uncomment the one you want.
   *
   * OPTION 1
   * Load from development server. Start the server from the repository root:
   *
   * $ npm start
   *
   * To run on device, change `localhost` to the IP address of your computer
   * (you can get this by typing `ifconfig` into the terminal and selecting the
   * `inet` value under `en0:`) and make sure your computer and iOS device are
   * on the same Wi-Fi network.
   */

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

  /**
   * OPTION 2
   * Load from pre-bundled file on disk. The static bundle is automatically
   * generated by "Bundle React Native code and images" build step.
   */

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

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"AwesomeProject"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [[UIViewController alloc] init];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;
}

@end

PCで立ち上げたサーバーから読み込む方法と、バンドルされたファイルからよみこむ方法があるとのこと。(よくわかっていない)
で、二つ目のスクリプトをアンコメントして、一つ目をコメントアウト
再度実機にアプリを立ち上げてみる。

f:id:uraway:20151121164922p:plain

やり方としては、立ち上げ先のdeviceにUSBケーブルでつないだ実機の名前が表示されるのでそれを選び、⌘+Rでテストを実行。
Security errorが出ると思うので、実機側でデベロッパーをtrustする。その他エラーが出たら適宜fix。

実機にテストアプリがインストールされ、正常に表示された。

これで知り合いにテストしてもらったり、自分で本番同様のUIを確かめたりすることができる。
f:id:uraway:20151121172405j:plain