Question

接下来我们来看一个例子，看看如何在已经存在的 iOS 应用中集成 React Native 的内容。

首先建立一个简单的 iOS 应用

如果你已经有一个原生的 iOS 的应用了，则可以跳过这一步。如果你还没有现成的原生 iOS 应用，可以先通过 Xcode 来建立一个应用，步骤如下。

1．打开 Xcode，选择 Create a new Xcode project。

2．选择 Single View Application 建立一个最简单的单页面的应用，然后点击 Next 按钮。

3．给建立的应用命名（我命名为 simpleApp），并选择要保存的目录，点击 create 就建立了一个最简单的应用，只不过这个应用目前并没有内容和逻辑。

安装 React Native

要在一个已经存在的 App 中集成 React Native 的内容，我们就需要先安装 React Native。不同于之前的安装方式，我们需要通过 CocoaPods 来安装。CocoaPods 是用于 iOS/Mac 开发的一个包管理工具。在下面的三种应用场景下，你可以考虑在项目中使用 CocoaPods。

- 你想要将第三方库（第三方库使用了 CocoaPods）整合到新创建的 React Native 项目中。

- 目前你的项目使用 CocoaPods 来管理依赖和库。

- 你想要将 React Native 框架添加到一个现有的项目中。

如果你还没有安装 CocoaPods，运行下面这个命令来安装：

sudo gem install cocoapods

注意，你需要提前安装 Ruby 来使用 gem 命令。

根据 React Native 官网最新的说明，它用 io.js 来取代了 node.js。让我们按照官网的指导来进行 io.js 的安装和配置。如果之前安装过 node.js，则先运行命令：

brew unlink node

这样可以完成 node 的解绑。然后运行：

brew install iojs
brew link iojs --force

进行 io.js 的安装和配置。

现在我们已经准备好使用 CocoaPods 了，使用 CocoaPods 来安装 React Native 吧。

1．进入到刚才那个 iOS 应用的文件目录，建立一个文件，命名为 Podfile。在使用 CocoaPods 安装 React Native 时，Podfile 相当于一个配置文件，告诉安装程序需要下载安装哪些内容。

2．在 Podfile 中添加如下的文本内容。

pod 'React'
pod 'React/RCTText'

这两行的内容告诉 CocoaPods 安装命令需要下载安装的内容为 React 和 React/RCTText （需要安装 React 和 React 中的 Text 组件）。同理，如果需要通过 CocoaPods 下载安装其他的内容，只要在 Podfile 中添加相应的内容就可以。

然后在终端中执行以下命令：

pod install

至此，你已经成功安装了 React Native。

创建 React Native 应用

接下来创建一个 React Native 应用，在 iOS 应用文件目录下建立 React Native 的内容。

1．建立一个目录，例如为 ReactComponent：

mkdir ReactComponent

2．在 ReactComponent 目录中，增加 index.ios.js。这个文件中的内容实际上就是我们要在 iOS 应用中使用的 React Native 的内容。代码如下：

'use strict';

var React = require('react-native');
var {
  Text,
  View
} = React;

var styles = React.StyleSheet.create({
  container: {
      flex: 1,
      backgroundColor: 'red'
  }
});

class SimpleApp extends React.Component {
  render() {
      return (
        <View style={styles.container}>
          <Text>This is a simple application.</Text>
        </View>
      )
  }
}

React.AppRegistry.registerComponent('SimpleApp', () =>
    SimpleApp);

在代码中出现的 SimpleApp 就是我们创建的组件的名称，我们后面会用到。

将 React Naitve 集成到 iOS 应用中去

到目前为止，基本的准备工作已经完成了，下面我们来将 React Native 的内容集成到 iOS 应用中去。首先，我们要打开之前新建的那个简单的 iOS 应用。但是要注意一下，不是通过．xcodeproj 文件来打开项目，而是通过．xcworkspace 文件来打开项目。

使用 Xcode 打开项目以后，看一下 Xcode 的界面，左侧边栏如图所示。

在侧边栏的 simpleApp 下，有一个 Main.storyboard。点击这个文件后，在界面的中部就会显示一个区域，它是一个虚拟的设备界面，我们可以在这个界面上添加类似文本框、按钮等一些组件。

在右侧边栏中，我们能看到一些内置的组件，可以通过拖动将一些组件放置到界面中。在其中找到 View 组件，拖动到虚拟界面中。

接下来，我们要建立一个新类，命名为 UIView。它是 UIView 的一个子类。在 Xcode 中新建一个文件，选择类别为 Cocoa Touch Class。

将新建的类命名为 ReactView，使它作为 UIView 的子类。再选择存放的路径，完成文件的新建。新建完成后，自动生成两个文件：ReactView.h 和 ReactView.m。在视图控制器 ViewControl.m 中修改代码如下：

#import "ViewController.h"
#import "ReactView.h"

@interface ViewController ()
@property (weak, nonatomic) IBOutlet ReactView ＊reactView;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically
    // from a nib.
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

相对于修改之前的内容，增加了“#import "ReactView.h"”和“@property (weak, nonatomic) IBOutlet ReactView ＊reactView; ”。这里对 ReactView 视图所做的管理内容就是禁用了 AutoLayout。这只是一个简单的例子，在实际的项目中，你应该打开 AutoLayout，并设置相应的约束。

下一步，RCTRootView 要出场了。你可以这样简单地理解 RCTRootView 的作用，它是 React Native 应用的生存空间。RCTRootView 对象负责加载 React Native（实际上就是通过 JavaScript 代码完成的 App）的内容并渲染出来。打开 ReactView.m 文件，添加以下内容：

#import "ReactView.h"
#import "RCTRootView.h"

@implementation ReactView

/＊
// 如果你需要自定义绘制过程，只需要覆盖 drawRect 方法就可以了。
// 一个空的实现过程对性能会有影响，所以不用的话，就先注释掉了。
- (void)drawRect:(CGRect)rect {
    // 绘制代码
}
＊/

- (void)awakeFromNib {
    NSString ＊urlString =
        @"http://localhost:8081/index.ios.bundle";
    NSURL ＊jsCodeLocation = [NSURL URLWithString:urlString];
    RCTRootView ＊rootView =
        [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                      moduleName:@"SimpleApp"
                                  launchOptions:nil];
    [self addSubview:rootView];
    rootView.frame = self.bounds;
}
@end

内容添加完成了。打开 Main.storyboard 界面，选中我们之前添加的那个 view，在右侧边栏中将这个 view 的所属类修改为 ReactView。

完成这些操作后，就可以启动服务器，查看一下结果是如何显示的。

在终端中进入项目的根目录，运行下面的命令启动服务器。

JS_DIR=pwd/ReactComponent; cd Pods/React; npm run start --root
    $JS_DIR

然后在 Xcode 中运行项目，在弹出的虚拟机中能看到如下页图所示的效果：

显示的红色区域内容就是我们在 index.ios.js 中完成的。这就说明，通过 React Native 完成的内容已经集成到一个原生的 iOS 应用中了。

链接库和模块

ReactNative 现在支持命令行接口（command line interface）来生成一个新的库。

react-native new-library SampleModule

生成 SampleModule 后，你需要将 SampleModule.xcproject 链接到 Xcode 中，再将库文件夹拖动到 Xcode 的项目名称下就可以了。

如果你的 Xcode 构建失败，请参考以下几个步骤来解决：

1．从 github 上复制 ReactNative 的代码仓库。

        git clone https://github.com/facebook/reactnative

2．将 Examples/SampleApp 文件夹复制到 AwesomeProject 下。

        mkdir Examples/AwesomeProject
        cp -R Examples/SampleApp/＊ Examples/AwesomeProject

3．运行 packager.sh 来指向 AwesomeProject 目录。

        packager/packager.sh --root=./Examples/AwesomeProject

4．在 Xcode 中重新打开 AwesomeProject 项目，再次构建。