摘要：通常情況下我們有兩種方式來構建一個使用技術的應用包原生。應用入口由原生代碼控制，頁面跳轉邏輯由原生主導。當采用第二種方式時就需要在原生應用中嵌入頁面。在中快速地創建一個項目。第五步，原生頁面調用頁面在中添加如圖代碼。

通常情況下我們有兩種方式來構建一個使用RN技術的應用：

RN包原生。應用入口由RN控制，頁面跳轉邏輯也由RN主導，當涉及做原生增強時使用RN的API構建一些原生的模塊并暴露出來給RN調用。

原生包RN。應用入口由原生代碼控制，頁面跳轉邏輯由原生主導。某些跨平臺業務邏輯頁面由RN開發。充分利用RN的跨平臺特性，較少原生開發的巨大成本。

當采用第二種方式時就需要在原生應用中嵌入RN頁面。現在就手把手的教大家如何操作。為方便大家理解，我們從一個全新創建的Objective C項目出發。

在XCode中快速地創建一個OC single view 項目。

和其他js項目一樣，添加RN的npm 依賴首先需要在項目的根目錄下創建一個package.json文件。二話不說，直接在項目根目錄下新建package.json,然后拷入以下代碼:

{
    "name": "EmbedRN",
    "version": "0.0.1",
    "private": true,
    "scripts": {
      "start": "node node_modules/react-native/local-cli/cli.js start",
      "test": "jest"
    },
    "dependencies": {
      "react": "~15.4.0-rc.4",
      "react-native": "0.38.0"
    },
    "devDependencies": {
      "babel-jest": "21.0.0",
      "babel-preset-react-native": "3.0.2",
      "jest": "21.0.1",
      "jest-react-native": "18.0.0",
      "prop-types": "^15.5.10",
      "react-test-renderer": "~15.4.0-rc.4"
    },
    "jest": {
      "preset": "react-native"
    }
  }

React和RN的版本根據自己的需要進行設定，但要注意二者版本匹配。如果不確定可以自己先react-native init一個項目看一下版本號。

接下來，熟悉得不能再熟悉的動作了: npm install。

安裝完成后我們在項目的根目錄下就多了一個子目錄node_modules/。親切吧。

使用cocodpod可以快速幫助我們添加React Native依賴項到原生項目里去。首先在項目根目錄下新建Podfile（通過執行pod init），這是cocopod的依賴項目錄。
拷入以下內容：

target "EmbedRN" do
  # "node_modules"目錄一般位于根目錄中
  # 但是如果你的結構不同，那你就要根據實際路徑修改下面的`:path`
  pod "React", :path => "./node_modules/react-native", :subspecs => [
    "Core",
    "RCTText",
    "RCTNetwork",
    "RCTWebSocket", # 這個模塊是用于調試功能的
    # 在這里繼續添加你所需要的模塊
  ]
end

依賴的庫名是React, 根據項目的需要添加不同的subspecs進來。如要使用Text那么加進來RCTText, Image就加RCTImage等等。可用的subspecs列表可以查閱node_modules/react-native/React.podspec文件。

好了，有了node_modules和Podfile,接下來運行命令:

pod install

Pod項目依賴安裝成功。關閉當前xcode session，從此以后我們就使用.xcworkspace來打開我們的項目了。

新建RN入口頁面：index.ios.js。至于這里的文件名是否一定必須是index.ios.js，回答是否定的。你可以使用任意的文件名，只要后面在oc代碼中指定同樣的文件名就可以了。
比如你想使用business2.js做文件名，沒問題，在后面的oc代碼中指定好jsCodeLocation地址就可以了。這樣就可以保證原生應用按照不同的業務場景嵌入不同的RN頁面。

import React, { Component } from "react";
import {
  AppRegistry,
  Text,
  View,
} from "react-native";


export default class Page1 extends Component {
  render() {
    return (
      
        
          Welcome to React Native!
        
        
          To get started, edit index.ios.js
        
        
          Press Cmd+R to reload,{"
"}
          Cmd+D or shake for dev menu
        
      
    );
  }
}


AppRegistry.registerComponent("Page1", () => Page1);

在ViewController.m中添加如圖代碼。 RCTRootView就是終極大法了。

首先打開RN的package server:

npm start -- --reset-cache

然后xcode中運行項目。
大功告成。