react-native项目集成到现有原生项目

96
Peter_Zhang
0.2 2018.06.12 15:37* 字数 1142

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

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

ios开发
Web note ad 1