由于 React 并沒(méi)有做出關(guān)于你其他的技術(shù)堆棧的假設(shè)——通常在 MVC 中簡(jiǎn)單的用 V 來(lái)表示——這很容易嵌入到現(xiàn)有 non-React Native 應(yīng)用程序中。事實(shí)上，它與另外的最佳實(shí)踐社區(qū)工具集成了，如 CocoaPods。

需求

• CocoaPods - gem install cocoapods
• Node.js - brew install node

用 CocoaPods 安裝 React Native

CocoaPods 是 iOS/Mac 開(kāi)發(fā)的管理工具包。我們需要用它來(lái)下載 React Native。如果你還沒(méi)有安裝 CocoaPods，請(qǐng)查看本教程。

當(dāng)你準(zhǔn)備使用 CocoaPods 工作時(shí)，添加以下行到 Podfile 中。如果你沒(méi)有，那么在你的項(xiàng)目的根目錄下創(chuàng)建它。

    pod 'React'
    pod 'React/RCTText'
    # Add any subspecs you want to use in your project

記得安裝所有你需要的 subspecs。沒(méi)有 pod 'React/RCTText'，<Text> 元素不能使用。

然后安裝你的 pods：

$ pod install

創(chuàng)建你的 React Native 應(yīng)用程序

有兩塊你需要設(shè)置：

1. 根 JavaScript 文件，該文件將包含實(shí)際的 React Native 應(yīng)用程序和其他組件
2. 包裝 Objective - C 代碼，將加載腳本并創(chuàng)建一個(gè) RCTRootView 來(lái)顯示和管理你的 React Native 組件

首先，為你的應(yīng)用程序的 React 代碼創(chuàng)建一個(gè)目錄，并創(chuàng)建一個(gè)簡(jiǎn)單的 index.ios.js 文件：

$ mkdir ReactComponent
$ touch index.ios.js

為 index.ios.js 復(fù)制 & 粘貼以下 starter 代碼——它是一個(gè) barebones React Native 應(yīng)用程序：

'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 將是你的模塊名稱(chēng)，這將在后面使用。

將容器視圖添加到你的應(yīng)用程序中

現(xiàn)在，你應(yīng)該為 React Native 組件添加一個(gè)容器視圖。在你的應(yīng)用程序中它可以是任何的 UIView。

http://wiki.jikexueyuan.com/project/react-native/images/integration1.png" alt="integration app" />

但是，為了使代碼簡(jiǎn)潔，讓我們把 UIView 歸入子類(lèi)。讓我們把它命名為 ReactView。打開(kāi)你的 Yourproject.xcworkspace，并創(chuàng)建一個(gè)新類(lèi) ReactView(你可以把它命名為任何你喜歡的名字：))。

    // ReactView.h
    #import <UIKit/UIKit.h>
    @interface ReactView : UIView
    @end

在一個(gè)視圖控制器中，想要管理這一視圖，繼續(xù)添加一個(gè)出口并將其連接：

    // ViewController.m
    @interface ViewController ()
    @property (weak, nonatomic) IBOutlet ReactView *reactView;
    @end

在這里我簡(jiǎn)單的禁用了 AutoLayout。在實(shí)際產(chǎn)品中，你應(yīng)該自己打開(kāi) AutoLayout，并且設(shè)置約束。

為容器視圖添加 RCTRootView

準(zhǔn)備好學(xué)習(xí)最有趣的這部分了嗎？現(xiàn)在我們將在你的 React Native 應(yīng)用程序存在的位置創(chuàng)建 RCTRootView。

在 ReactView.m 中，我們首先需要用 index.ios.bundle 的 URI 啟動(dòng) RCTRootView。index.ios.bundle 將被 packager 創(chuàng)建，并由 React Native 服務(wù)器服務(wù)，這將在稍后討論。

NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];
// For production use, this `NSURL` could instead point to a pre-bundled file on disk:
//
//   NSURL *jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
//
// To generate that file, run the curl command and add the output to your main Xcode build target:
//
//   curl http://localhost:8081/index.ios.bundle -o main.jsbundle
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                    moduleName: @"SimpleApp"
                                                 launchOptions:nil];

然后把它作為 ReactView 的子視圖添加。

[self addSubview:rootView];
rootView.frame = self.bounds;

啟動(dòng)開(kāi)發(fā)服務(wù)器

在根目錄，我們需要啟動(dòng) React Native 開(kāi)發(fā)服務(wù)器。

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

這個(gè)命令將在我們的 CocoaPods 依賴(lài)中啟動(dòng)一個(gè) React Native 開(kāi)發(fā)服務(wù)器，來(lái)創(chuàng)建捆綁腳本。——root 選項(xiàng)表明 React Native 應(yīng)用程序的根——這將是我們包含單一 index.ios.js 文件的 ReactComponents目錄。該運(yùn)行的服務(wù)器將通過(guò) http:/ / localhost:8081 / index.ios.bundle 把 index.ios.bundle 打包成可訪(fǎng)問(wèn)的文件。

編譯和運(yùn)行

現(xiàn)在編譯并運(yùn)行你的應(yīng)用程序。你將看到你的 React Native 應(yīng)用程序在 ReactView 內(nèi)部運(yùn)行。

http://wiki.jikexueyuan.com/project/react-native/images/integration2.png" alt="integration app" />

Live 也從模擬器重新加載工作！你已經(jīng)得到了一個(gè)簡(jiǎn)單的完全封裝在 Objective–C UIView 子類(lèi)中的 React 組件。

總結(jié)

所以，當(dāng) RCTRootView 初始化時(shí)，它會(huì)嘗試從 React Native 開(kāi)發(fā)服務(wù)器中下載，解析并運(yùn)行包文件。這意味著你所需要做的就是為 RCTRootView 實(shí)現(xiàn)你自己的容器視圖或視圖控制器——RCTRootView 攝取了捆綁的 JS 并呈現(xiàn)出你的 React 組件。萬(wàn)歲!

你可以在這里查看一個(gè)示例應(yīng)用程序的完整源代碼。