本文主要记录了自己在往原生项目中集成React-Native（以下简称RN）开发的一些经验和踩的坑，对这次的经历做一个备忘录，同时希望能帮到更多的人。
关于为什么要使用RN开发，本文不做更多的论述。RN的优缺点的论点网上太多了，读者自行搜索查找、思考、甄别。
目前RN的最新版本是051，本文所有的内容都在该版本上的开发、测试。
我本人使用的是Mac端开发，并只在iOS的项目上做的测试。
好，进入正题。
一、搭建RN开发环境
既然要使用RN开发，最基本的肯定要搭建其开发环境。搭建RN开发环境一共分为：
- 安装必要软件
- 测试安装
1. 安装必需的软件
Homebrew
Homebrew, Mac系统的包管理器，用于安装NodeJS和一些其他必需的工具软件。
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
在Max OS X 10.11（El Capitan)版本中，homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复：
sudo chown -R `whoami` /usr/local
Node
使用Homebrew来安装Node.js.
React Native目前需要NodeJS 5.0或更高版本。本文发布时Homebrew默认安装的是最新版本，一般都满足要求。
brew install node
安装完node后建议设置npm镜像以加速后面的过程（或使用科学上网工具）。注意：不要使用cnpm！cnpm安装的模块路径比较奇怪，packager不能正常识别！
npm config set registry https://registry.npm.taobao.org --global
或
npm config set disturl https://npm.taobao.org/dist --global
Yarn、React Native的命令行工具（react-native-cli）
Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。
npm install -g yarn react-native-cli
安装完yarn后同理也要设置镜像源：
yarn config set registry https://registry.npm.taobao.org --global
或
yarn config set disturl https://npm.taobao.org/dist --global
如果你看到EACCES: permission denied这样的权限报错，那么请参照上文的homebrew译注，修复/usr/local目录的所有权：
sudo chown -R `whoami` /usr/local
安装完yarn之后就可以用yarn代替npm了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install --save 某第三方库名。
Watchman
Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager可以快速捕捉文件的变化从而实现实时刷新）。
brew install watchman
Xcode
这个就不多说了，在APPStrore下载即可。最好保证下载Xcode7.0以上。
2.测试
以上软件安装好了之后，我们现在可以开始尝试创建一个RN项目了，测试看是否出现纰漏。
打开Mac的终端工具命令行：
react-native init myFirstRNProject
这里是在mac的根目录创建一个myFirstRNProject的文件夹。我们的项目所需要的一切文件也会在这个文件夹里面被创建好。这种方式创建的就是最新版本的RN，也就是0.51版本。
如果我们需要进行指定版本的创建的话，可以像下面这样创建：
react-native init myFirstRNProject --version 0.45
这种方式将会创建0.45版本的RN项目。
创建RN文件夹后，执行：
cd myFirstRNProject
进入到该项目中。
react-native run-ios
启动项目中的iOS部分。
注意： 启动之后，Mac会自动开启一个终端的对话框，这个对话框在项目的开启期间必须要一直打开着，如果被关闭，整个项目也就被关闭了。
打开项目看到这个样子：
我们将在
APP.JS文件夹中编写项目需要的代码。 如果是049之前的版本，则应该在 index.ios.js和index.Android.js中分别iOS和安卓的代码。如果一切正常，说明项目就是创建成功了。
二、搭建原生项目集成环境
搭建好了开发环境之后，我们能够随时创建一个新的项目了。这时候就具备了给原生项目集成RN的环境。
1. 首先创建一个空的文件夹。
这个文件夹将会是集成之后项目文件。假设我给他取名： iOS-RN.
2. 在 iOS-RN 文件夹中，创建一个/ios文件。
这个/ios文件中将存放原生项目中所有的文件。这直接将原生项目中的文件复制一份拷贝过来即可。
3. 安装JavaScript依赖包: package.js文件
在项目根目录(和/ios平级)下创建一个名为package.json的空文本文件，然后填入以下内容：
{
"name": "MyReactNativeApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "16.0.0-alpha.6", // 指定了React 版本
"react-native": "0.51" //这里指定了RN的版本
}
}
示例中的version字段没有太大意义（除非你要把你的项目发布到npm仓库）。scripts中是用于启动packager服务的命令。dependencies中的react和react-native的版本取决于你的具体需求。一般来说我们推荐使用最新版本。你可以使用npm info react和npm info react-native来查看当前的最新版本。另外，react-native对react的版本有严格要求，高于或低于某个范围都不可以。本文无法在这里列出所有react native和对应的react版本要求，只能提醒读者先尝试执行npm install，然后注意观察安装过程中的报错信息，例如require react@某.某.某版本, but none was installed，然后根据这样的提示，执行npm i -S react@某.某.某版本。如果你使用多个第三方依赖，可能这些第三方各自要求的react版本有所冲突，此时应优先满足react-native所需要的react版本。其他第三方能用则用，不能用则只能考虑选择其他库。
设置完成之后，安装依赖包：
$ npm install
4. 在原生项目中使用CocoaPod添加RN依赖文件
使用终端cd进入到/ios文件中，安装CocoaPod依赖包管理系统。（这里推荐使用CocoaPods，如果之前的原生项目中没有安装的话，需要自行想办法安装一个）。
对于已经安装了CocoaPod 的项目，我们进入到对应的podfile文件：
$ vim podfile
在podfile文件中添加以下内容：
# 'node_modules'目录一般位于根目录中
# 但是如果你的结构不同，那你就要根据实际路径修改下面的`:path`
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'CxxBridge', # 如果RN版本 >= 0.45则加入此行
'DevSupport', # 如果RN版本 >= 0.43，则需要加入此行才能开启开发者菜单
'RCTText',
'RCTNetwork',
'RCTWebSocket', # 这个模块是用于调试功能的
# 在这里继续添加你所需要的RN模块
]
# 如果你的RN版本 >= 0.42.0，则加入下面这行。
pod "yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
# 这里注意： 如果是0.49以下的RN，则使用下面这条：
# pod "Yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
# 如果RN版本 >= 0.45则加入下面三个第三方编译依赖
pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'GLog', :podspec => '../node_modules/react-native/third-party-podspecs/GLog.podspec'
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
完了之后，更新Pod。
$ pod install
有时候会更新失败，注意查看失败的原因，对症修改即可。
更新成功之后，我们在项目中就可以通过import React使用React提供的库文件了。在每一个需要用到RN相关内容的界面的原生代码中，都需要加入这个头文件。
三、桥接RN和iOS项目中的内容
按照传统，我打算使用RN写一个“Heollo world” 的界面，然后在原生的项目中使用这个界面。
1. 创建index.js文件。
在和ios文件夹平级的目录下（根目录），使用命令
$ touch index.js
创建index.js文件。这个文件是RN的入口文件，如果是 049之前的RN，那么应该创建index.ios.js文件。
2. 在index.js文件写入以下代码：
import React from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class FirstView extends React.Component {
render() {
var contents = this.props.rootTag;
return (
<View style={styles.center}>
<Text >
{this.props.content}
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
center: {
marginTop: 50,
width:120,
height: 60,
justifyContent: 'center',
alignItems: 'center',
backgroundColor:"red"
},
});
// 整体js模块的名称
AppRegistry.registerComponent('FirstView', () => FirstView);
具体代码的意思就是在一个页面中添加了一个包含“Hello world”文字的 <Text>控件。
3. 编写原生代码对接RN
为了简单起见，我直接在AppDelegate文件中，将window的根视图设置成RN编写的“Hello world”界面。
当然，我们同样可以在其他的原生界面进行跳转到RN界面。
首先
import React
然后在 didFinishLaunchingWithOptions 函数中：
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
self.window = UIWindow.init(frame: CGRect.init(x: 0, y: 0, width: ScreenWidth, height: ScreenHeight))
self.window?.makeKeyAndVisible()
// 如果是 使用真机调试，需要使用电脑的IP地址。
// let url = URL.init(with: "http://192.168.0.174:8081/index.bundle?platform=ios")
// 如果是使用Xcode自带的模拟器，则直接使用本地服务器的端口即可。
let url = URL.init(with: "http://localhost:8081/index.bundle?platform=ios")
let rootView = RCTRootView.init(bundleURL: url, moduleName: "FirstView", initialProperties: [ "content":"Hello world"], launchOptions: nil)
let VC = UIViewController.init()
VC.view = rootView
self.window?.rootViewController = VC
return true
}
注意： 这里的FirstView 的名称必须和RN中注册的名称一模一样。不然会无法识别的。
这段代码的意思就是从RN中加载一个页面（这个页面就是我们写的“Hello world”页面），然后作为window的根视图展示。
4. 启动RN项目
使用mac的终端工具，cd 进入到项目的根目录，就是上面说的 iOS-RN文件夹，在这里可以看到 index.js文件。
输入命令行：
$ npm start
之后，RN项目开始启动，最后, 终端框中会看到这句提示：Loading dependency graph, done.，说明RN启动完成。这时候注意，不要关闭这个终端，如果需要使用终端执行其他的命令，可以新建窗口。
这时候所有的RN依赖库都加载完毕，等待原生项目启动调用。
5. 启动原生项目
Xocde中，选择模拟器，comand+R。
如果一切正常的话，打开模拟器之后，会直接进入到了“Hello world”界面。
下图：
以上就是在原生项目中集成RN的全部过程了。当然这个过程的步骤很多，很有可能出现各种各样的错误，这时候需要耐心仔细看错误提示。RN的错误提示做的还是很成熟的，我自己接入RN以来各种错误大部分都是通过其错误提示修复的，实在不行，就上各种搜索引擎上去搜索吧。
