通常情况下我们有两种方式来构建一个使用RN技术的应用：
- RN包原生。应用入口由RN控制，页面跳转逻辑也由RN主导，当涉及做原生增强时使用RN的API构建一些原生的模块并暴露出来给RN调用。
- 原生包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中运行项目。
大功告成。
