神刀安全网

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

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

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

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

版本如图:

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

image

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

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

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

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

image

我们需要这样去做:

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

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文件),如图:

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

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工程,如图:

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

image

效果如下:

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

image

运行Packager

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

运行应用

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

在项目的根目录中执行:

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

image

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

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

image

在项目info中添加

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

image

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

image

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

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » react-native项目集成到现有原生项目

分享到:更多 ()