现有Android项目引入ReactNative

作者：相濡以沫灬
链接： http://blog.csdn.net/github_33304260/article/details/76571961 本文由作者投稿发布。

为什么写这篇文章，因为很多时候我们是需要在原Android工程中添加ReactNative，而不是直接react-native init hello来创建工程，而且官网的说明不是很详细，不是完全针对安卓的，所以本文的必要性不言而喻。

1创建Android原生工程

新建Android原生工程，这里就不详细叙述了，如下图：





点击finish到这里Android原生工程创建完成。

运行一下看下效果：

2动态添加ReactNative

第一步：初始化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接口中的方法。



到此，我们已经大功告成，下面来看下效果。

效果展示：

如果你有想学习的文章直接留言，我会整理征稿。如果你有好的文章想和大家分享欢迎投稿，直接向我投递文章链接即可。

欢迎长按下图->识别图中二维码或者扫一扫关注我的公众号：



var first_sceen__time = (+new Date());

if ("" == 1 && document.getElementById('js_content')) {
document.getElementById('js_content').addEventListener("selectstart",function(e){ e.preventDefault(); });
}

(function(){
if (navigator.userAgent.indexOf("WindowsWechat") != -1){
var link = document.createElement('link');
var head = document.getElementsByTagName('head')[0];
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = "//res.wx.qq.com/mmbizwap/zh_CN/htmledition/style/page/appmsg/page_mp_article_improve_winwx31619e.css";
head.appendChild(link);
}
})();

赞赏

长按二维码向我转账



受苹果公司新规定影响，微信 iOS 版的赞赏功能被关闭，可通过二维码转账支持公众号。

阅读原文
阅读

[/i]

投诉



微信扫一扫
关注该公众号