在现有的原生应用中嵌入React Native页面(ios版)

通常情况下我们有两种方式来构建一个使用RN技术的应用：

1. RN包原生。应用入口由RN控制，页面跳转逻辑也由RN主导，当涉及做原生增强时使用RN的API构建一些原生的模块并暴露出来给RN调用。
2. 原生包RN。应用入口由原生代码控制，页面跳转逻辑由原生主导。某些跨平台业务逻辑页面由RN开发。充分利用RN的跨平台特性，较少原生开发的巨大成本。

当采用第二种方式时就需要在原生应用中嵌入RN页面。现在就手把手的教大家如何操作。为方便大家理解，我们从一个全新创建的Objective C项目出发。

第一步，创建一个OC原生项目。

在XCode中快速地创建一个OC single view 项目。

第二步，添加RN需要的npm依赖项目。

和其他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/。亲切吧。

第三步，安装cocopod依赖项。

使用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页面

新建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 (
      <View style={{
          flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF'}}>
        <Text>
          Welcome to React Native!
        </Text>
        <Text>
          To get started,edit index.ios.js
        </Text>
        <Text>
          Press Cmd+R to reload,{'n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
}


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

第五步，原生页面调用RN页面

在ViewController.m中添加如图代码。 RCTRootView就是终极大法了。

第六步，运行

首先打开RN的package server:

npm start -- --reset-cache

然后xcode中运行项目。大功告成。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!