Question

注意，在设备上运行 React Native 应用需要 Apple 开发者账号，并需要绑定设备。本书只是覆盖到了 React Native 的部分。

通过移动设备访问开发服务器

你可以使用开发服务器来快速迭代开发，不过如果你选择这种方式的话，你的电脑和手机必须连接在同一个无线网络中。

1．打开 iOS 目录下的 AppDelegate.m 文件。

2．把构建地址中的 IP 地址从 localhost 修改成为你的设备 IP。

3．在 Xcode 中选择你的手机作为构建目标，点击“Build and run”按钮。

使用离线包

你也可以将所有的 JavaScript 代码打包到应用中。使用这种方式，测试时不需要连接开发服务器，也不用将 App 提交到 AppStore 上。

1．打开 iOS/AppDelegate.m 文件。

2．将注释 jsCodeLocation=[[NSBundle mainBundle]…取消。

3．在终端中进入所写应用的根目录，运行 react-native bundle 命令。

绑定脚本支持两种参数：

- --dev：设置 DEV 变量的值为 true。设置为 true 以后，会有很多的警告等调试信息。在实际的生产环境中建议设置 DEV =false。

- --minify：使用 UglifyJs 压缩 JS 代码。

如果你的项目已经开发了一段时间，你的 Xcode 工程中有可能不包含 main.jsbundle。要添加 main.jsbundle，只需右击你的项目目录，选择“Add Files to…”，然后选 main.jsbundle 即可。

React Native 到底是什么

如果你已经进行到这一步，那么要恭喜你一下了，你应该已经能够在你自己的手机上运行 AwesomeProject 了。现在是时候去弄清楚究竟发生了什么。

•画布（Canvas）：你经常使用 UIWindow 类创建的窗口应用。

•画笔（Brush）：使用 UIViewController 类在画布上绘图。

•颜料（Paint）：应用中的颜料。使用画笔、颜料在画布上绘图。

对于更复杂的应用设计，你可能需要多个画笔和画布，它们按照上下级关系嵌套，来构成图形用户界面，如下图所示。

示例：

// 创建

 Canvas
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
// 创建

 Brush
MyViewController ＊rootViewController = [[MyViewController alloc]init];
rootViewController.launchOptions = launchOptions;
// 在 Canvas 上使用

 Brush
self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];
return YES;

在上面的代码中，先是使用 Frame 创建了一个 Canvas，之后创建了 Brush。然后使用 rootViewController 来将 Brush 关联到 Canvas。在 Brush 中，你也可以创建 Paint, Paint 对于 Brush 来说是一个 subView：

RCTRootView ＊rootView =
    [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                  moduleName:@"AdmobTest"
                              launchOptions:self.launchOptions];
rootView.frame = CGRectMake(0, 50, viewRect.size.width,
                                    viewRect.size.height - 0);
[self.view addSubview:rootView];

如果你愿意，还可以增加很多的 subView。不错吧！

所以 React Native 实际上只是一个 Paint。看看下面的代码：

NSURL ＊jsCodeLocation;
jsCodeLocation =
    [[NSBundle mainBundle] URLForResource:@"main"
                              withExtension:@"jsbundle"];
RCTRootView ＊rootView =
    [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                  moduleName:@"SampleApp"
                              launchOptions:self.launchOptions];

由上面的代码可以看到，定义一个新的 React Native 视图，只需要传递下面两个参数。

- jsCodeLocation 地址：是一个 React 组件的本地或者远程 URL 地址。

- 模块的名称：你在 index.ios.js 文件中通过 AppRegistry 注册的名称。

AppRegistry.registerComponent('SampleApp', () => SampleApp);

在完成 React Native 视图的创建后，现在你就可以使用这个视图的属性了，就好像使用其他原生的 iOS 视图一样。它对于你的项目来说就是 Paint。