與現(xiàn)有的應用程序集成

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

需求

• CocoaPods - gem install cocoapods

• Node.js - brew install node

用 CocoaPods 安裝 React Native

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

當你準備使用 CocoaPods 工作時，添加以下行到 Podfile 中。如果你沒有，那么在你的項目的根目錄下創(chuàng)建它。

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

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

然后安裝你的 pods：

$ pod install

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

有兩塊你需要設置：

1. 根 JavaScript 文件，該文件將包含實際的 React Native 應用程序和其他組件

2. 包裝 Objective - C 代碼，將加載腳本并創(chuàng)建一個 RCTRootView 來顯示和管理你的 React Native 組件

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

$ mkdir ReactComponent
$ touch index.ios.js

為 index.ios.js 復制 & 粘貼以下 starter 代碼——它是一個 barebones 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 將是你的模塊名稱，這將在后面使用。

將容器視圖添加到你的應用程序中

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

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

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

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

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

在這里我簡單的禁用了 AutoLayout。在實際產(chǎn)品中，你應該自己打開 AutoLayout，并且設置約束。

為容器視圖添加 RCTRootView

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

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

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.jsbundleRCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                    moduleName: @"SimpleApp"
                                                 launchOptions:nil];

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

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

啟動開發(fā)服務器

在根目錄，我們需要啟動 React Native 開發(fā)服務器。

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

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

編譯和運行

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

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

總結(jié)

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

你可以在這里查看一個示例應用程序的完整源代碼。