作者:相濡以沫灬
链接:
http://blog.csdn.net/github_33304260/article/details/76571961
本文由作者投稿发布。
为什么写这篇文章,因为很多时候我们是需要在原Android工程中添加ReactNative,而不是直接react-native init hello来创建工程,而且官网的说明不是很详细,不是完全针对安卓的,所以本文的必要性不言而喻。
新建Android原生工程,这里就不详细叙述了,如下图:
点击finish到这里Android原生工程创建完成。
运行一下看下效果:
第一步:初始化package.json文件:
在工程根目录下的CMD中输入npm init,然后会生成package.json文件
⚠️:这里name不能使用大写,如上动图所示,填写完相应的信息后会在根目录中生成相应的package.json文件,里面内容如下:
第二步:在package.json文件中添加启动脚本:
"start": "node node_modules/react-native/local-cli/cli.js start"
第三步:添加react和react-native 模块:
在根目录执行如下代码:
npm install --save react react-native
效果如图:
执行完成后会出现下图的node_modules
查看项目中有node_modules,说明react和react native 安装完成,如果没有说明安装失败,需要重新安装。
第四步:添加index.android.js文件到项目中:
⚠️:AppRegistry.registerComponent(‘ReactNativeApp’, () => ReactNativeApp);
里面的名称 必须和你的工程名一致,对这个文件不熟悉的童鞋可以看本人之前的代码或者
react-native官网
http://reactnative.cn/
下图是官网相关介绍:
第五步:添加ReactNative相关依赖:
1.在app的build.gradle文件中添加react-native依赖库
compile "com.facebook.react:react-native:+"
2.在project的build.gradle文件中添加react-native路径
maven {
// All of React Native (JS, Obj-C sources,
// Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
⚠️:这里注意不要使用maven中的,因为我们使用的是我们本地的node_modules
第六步:添加相关权限:
在AndroidManifest.xml中添加如下代码:
<uses-permission android:name="android.permission.INTERNET" />
第七步:添加reactnative组件:
添加com.facebook.react.ReactRootView 组件 布局代码如下
java代码如下:
第八步:添加DevSettingsActivity配置
将DevSettingsActivity配置加入到AndroidManifest.xml文件中
第九步:实现ReactApplication
我们需要自定义Application然后去实现ReactApplication接口中的方法。
到此,我们已经大功告成,下面来看下效果。
效果展示:
如果你有想学习的文章直接留言,我会整理征稿。如果你有好的文章想和大家分享欢迎投稿,直接向我投递文章链接即可。
欢迎长按下图->识别图中二维码或者扫一扫关注我的公众号:
长按二维码向我转账
![](http://res.wx.qq.com/mmbizwap/zh_CN/htmledition/images/pic/appmsg/pic_reward_qrcode.2x3534dd.png)
受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。
微信扫一扫
关注该公众号