使用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所示：

image

安装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"
}
}

版本如图：

image

3、接下来使用npm（node包管理器）来安装React和React-Native模块，请打开终端/命令提示行，进入项目目录中（既包含package.json文件的目录）,然后运行下列命令来安装：

image

安装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时会遇到如下问题：

image

我们需要这样去做：

image

然后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文件）,如图：

image

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工程，如图：

image

效果如下：

image

运行Packager

要运行应用，首先需要启动开发服务器（即Packager，它负责实时监测js文件的变动并实时打包，输出给客户端运行）。具体只需简单进入到项目根目录中，然后运行：npmstartPackager只是在开发时需要，便于你快速开发迭代。在正式发布应用时，所有的js文件都会被打包为一整个jsbundle文件离线运行，此时客户端不再需要Packager服务。

运行应用

如果你使用的是Xcode，那么照常编译和运行应用即可。如果你没有使用Xcode（但是你仍然必须安装Xcode），则可以在命令行中使用以下命令来运行应用：

在项目的根目录中执行：

$ react-native run-ios

image

如果项目运行不起来，试试适配ios9网络访问：

image

在项目info中添加

image

NSAppTransportSecurity
NSTemporaryExceptionAllowsInsecureHTTPLoads

image

到此为止，我们集成完毕，大家不妨自己动手也尝试一下。。。