使用cocoapods集成react-native到现有原生项目
一、可参考react-native官网：http://reactnative.cn/docs/0.49/integration-with-existing-apps.html#content
二、集成步骤：
设置项目目录结构
1、起初新建一个空的目录用于存放react-native项目（建议使用终端），在桌面新建空文件RN_Peter，然后在这个文件夹下新建一个子/ios子目录,把现有的项目拷贝到/ios子目录中,如图1所示：
安装JavaScript依赖包
2、在项目的根目录下创建一个名为package.json的空文本文件，然后填入一下内容：
此时，应该检查下react版本(npm info react-native)，react-native对react的版本有严格要求，高于或低于某个范围都不可以；
{
"name":"RN_Peter_Test",
"version":"0.0.1",
"private":true,
"scripts": {
"start":"node node_modules/react-native/local-cli/cli.js
start"
},
"dependencies": {
"react":"16.0.0-beta.5",
"react-native":"0.49.3"
}
}
版本如图：
3、接下来使用npm（node包管理器）来安装React和React-Native模块，请打开终端/命令提示行，进入项目目录中（既包含package.json文件的目录）,然后运行下列命令来安装：
安装CocoaPods
4、然后就是安装cocoapods了，可参考
把React Native添加到你的应用中
配置CocoaPods的依赖
5、现在就是需要在cocoapods的Podfile中指定我们所需要私用的组件，在创建Podfiel文件的时候，需要指定具体安装哪些react-native的依赖库，所指定的每一个库就成为一个subspec，可用的subspec都列在node_module/react-native/React.podspec中。一般来说都是首先需要添加Core，这一subspec包含了必须的AppRegistry、StyleSheet、View以及其他的一些React Native核心库。如果你想使用React Native的Text库（即组件），那就需要添加RCTText的subspec。同理，Image需要加入RCTImage，等等。
我们需要在Podfile文件中指定所需的subspec。创建Podfile的最简单的方式就是在/ios子目录中使用CocoaPods的init命令：
在使用pod init时会遇到如下问题：
我们需要这样去做：
然后Podfile文件就创建成功了；
Podfile会创建在执行命令的目录中。你需要调整其内容以满足你的集成需求。调整后的Podfile的内容看起来类似下面这样(复制时去掉注释)：
# 'node_modules'目录一般位于根目录中
#但是如果你的结构不同，那你就要根据实际路径修改下面的`:path`
pod 'React', :path => 'RN_Peter_Test/node_modules/react-native',:subspecs => [
'Core',
'DevSupport', #如果RN版本>= 0.43，则需要加入此行才能开启开发者菜单
'RCTText',
'RCTNetwork',
'RCTWebSocket',
‘BatchedBridge’#这个模块是用于调试功能的
#在这里继续添加你所需要的模块
]
#如果你的RN版本>= 0.42.0，则加入下面这行
pod“yoga", :path=> "RN_Peter_Test/node_modules/react-native/ReactCommon/yoga"
end
‘BatchedBridge’#记得不要忘记这个模块，不然项目运行起来会报错,可参考
注意：”Yoga”这里不知为何，如果Y大写，会报错，改成’yoga’即可
创建好了Podfile后，pod install就可以开始安装React Native的pod包了。
代码集成
6、接下来就是项目代码的集成工作，首先在项目根目录下创建一个空的index.js文件。（注意在0.49版本之前是index.ios.js文件）,如图：
7、在index.js中添加你自己的组件。这里我们只是简单的添加一个组件，然后用一个带有样式的组件把它包起来，复制如下代码到index.js中：
importReactfrom'react';
import{
AppRegistry,
StyleSheet,
Text,
View
}from'react-native';
classRNHighScoresextendsReact.Component{
render() {
varcontents =this.props["scores"].map(
score =>{score.name}:{score.value}{"\n"}
);
return (
2048 HighScores!
{contents}
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent:'center',
alignItems:'center',
backgroundColor:'#FFFFFF',
},
highScoresTitle: {
fontSize: 20,
textAlign:'center',
margin: 10,
},
scores: {
textAlign:'center',
color:'#333333',
marginBottom: 5,
},
});
//整体js模块的名称
AppRegistry.registerComponent('MyReactNativeApp',
() => RNHighScores);
MyReactNativeApp是整体js模块（即你所有的js代码）的名称。你在iOS原生代码中添加React Native视图时会用到这个名称。
掌握核心科技：RCTRootView
8、打开ios工程，如图：
效果如下：
运行Packager
要运行应用，首先需要启动开发服务器（即Packager，它负责实时监测js文件的变动并实时打包，输出给客户端运行）。具体只需简单进入到项目根目录中，然后运行：npmstartPackager只是在开发时需要，便于你快速开发迭代。在正式发布应用时，所有的js文件都会被打包为一整个jsbundle文件离线运行，此时客户端不再需要Packager服务。
运行应用
如果你使用的是Xcode，那么照常编译和运行应用即可。如果你没有使用Xcode（但是你仍然必须安装Xcode），则可以在命令行中使用以下命令来运行应用：
在项目的根目录中执行：
$ react-native run-ios
如果项目运行不起来，试试适配ios9网络访问：
在项目info中添加
NSAppTransportSecurity
NSTemporaryExceptionAllowsInsecureHTTPLoads
到此为止，我们集成完毕，大家不妨自己动手也尝试一下。。。
