摘要：通常情況下我們有兩種方式來(lái)構(gòu)建一個(gè)使用技術(shù)的應(yīng)用包原生。應(yīng)用入口由原生代碼控制，頁(yè)面跳轉(zhuǎn)邏輯由原生主導(dǎo)。當(dāng)采用第二種方式時(shí)就需要在原生應(yīng)用中嵌入頁(yè)面。在中快速地創(chuàng)建一個(gè)項(xiàng)目。第五步，原生頁(yè)面調(diào)用頁(yè)面在中添加如圖代碼。

通常情況下我們有兩種方式來(lái)構(gòu)建一個(gè)使用RN技術(shù)的應(yīng)用：

RN包原生。應(yīng)用入口由RN控制，頁(yè)面跳轉(zhuǎn)邏輯也由RN主導(dǎo)，當(dāng)涉及做原生增強(qiáng)時(shí)使用RN的API構(gòu)建一些原生的模塊并暴露出來(lái)給RN調(diào)用。

原生包RN。應(yīng)用入口由原生代碼控制，頁(yè)面跳轉(zhuǎn)邏輯由原生主導(dǎo)。某些跨平臺(tái)業(yè)務(wù)邏輯頁(yè)面由RN開(kāi)發(fā)。充分利用RN的跨平臺(tái)特性，較少原生開(kāi)發(fā)的巨大成本。

當(dāng)采用第二種方式時(shí)就需要在原生應(yīng)用中嵌入RN頁(yè)面。現(xiàn)在就手把手的教大家如何操作。為方便大家理解，我們從一個(gè)全新創(chuàng)建的Objective C項(xiàng)目出發(fā)。

在XCode中快速地創(chuàng)建一個(gè)OC single view 項(xiàng)目。

和其他js項(xiàng)目一樣，添加RN的npm 依賴首先需要在項(xiàng)目的根目錄下創(chuàng)建一個(gè)package.json文件。二話不說(shuō)，直接在項(xiàng)目根目錄下新建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的版本根據(jù)自己的需要進(jìn)行設(shè)定，但要注意二者版本匹配。如果不確定可以自己先react-native init一個(gè)項(xiàng)目看一下版本號(hào)。

接下來(lái)，熟悉得不能再熟悉的動(dòng)作了: npm install。

安裝完成后我們?cè)陧?xiàng)目的根目錄下就多了一個(gè)子目錄node_modules/。親切吧。

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

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

依賴的庫(kù)名是React, 根據(jù)項(xiàng)目的需要添加不同的subspecs進(jìn)來(lái)。如要使用Text那么加進(jìn)來(lái)RCTText, Image就加RCTImage等等?？捎玫膕ubspecs列表可以查閱node_modules/react-native/React.podspec文件。

好了，有了node_modules和Podfile,接下來(lái)運(yùn)行命令:

pod install

Pod項(xiàng)目依賴安裝成功。關(guān)閉當(dāng)前xcode session，從此以后我們就使用.xcworkspace來(lái)打開(kāi)我們的項(xiàng)目了。

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

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就是終極大法了。

首先打開(kāi)RN的package server:

npm start -- --reset-cache

然后xcode中運(yùn)行項(xiàng)目。
大功告成。