将React Native集成至Android原生应用
将React Native集成至Android原生应用
Android Studio 2.1 Preview 4生成的空项目
react-native 环境 0.22.2
初次编译后apk有1.1M,还算可以接受。 默认依赖的lib如下图所示:
1.app/build.gradle里添加如下代码:
compile 'com.facebook.react:react-native:0.20.+'
再次编译后apk竟然有10.3M,太夸张了,我们来看看倒底都是什么占用了这么大的空间,仔细看一下其中包含:
我们一起来认识一下这个库是起什么作用的:
- android-jsc-r174650:Android 里的 jsc 引擎
- appcompat-v7-23.0.1:appcompat v7 支持库
- bolts-android-1.1.4:Facebook 开发的 Android 的底层库集合,主要是处理 Task
- drawee-0.8.1:fresco 控件中的一个负责显示的底层库,包含在 fresco 里
- fbcore-0.8.1:Facebook 内核库
- fresco-0.8.1:Facebook 开发的一款强大的 Android 图片处理库
- imagepipeline-0.8.1:负责完成加载图片(网络、本地文件,本地资源),包含在fresco里
- imagepipeline-okhttp-0.8.1:负责完成加载图片前的网络请求,包含在 fresco 里
- jackson-core-2.2.3:负责处理 JSON 数据
- jsr-305:供检查软件缺陷用的注解
- library-2.4.0:nineoldandroids 开源动画库
- okhttp-2.5.0:强大的网络请求库
- okhttp-ws-2.5.0:okhttp 的 web sockets 功能库
- okio-1.5.0:Square 公司开发的补充 java.io 和 java.nio 的不足,用于更加方便,快速的访问、存储和处理你的数据
- react-native-0.20.1:react native 库,上面和下面这些库都是被带进来的 :)
- recyclerview-v7-23.0.1:Android 5.0 v7 RecyclerView 扩展库
- stetho-1.2.0:Facebook 开发的 Chrome Developer 工具,用来调试React Native程序
- stetho-okhttp-1.2.0:stetho 的网络请求支持库
- support-annotations-23.0.1:帮助 Android Studio 检测代码中可能存在的错误
- support-v4-23.0.1:Android v4 支持库
如果原Android项目应用了这些插件,那恭喜你,可以复用了,反之就要算办法精减(我也还在研究)。
2.在MainActivity里添加跳转至ReactNativeActivity的代码(模拟业务场景)
3.添加ReactNativeActivity页面,向里面添加代码(官网那些代码太老了,这个版本是最曼妙的)
4.向AndroidManifest.xml里添加 .ReactNativeActivity 和 com.facebook.react.devsupport.DevSettingsActivity
5.拷贝如下文件夹及文件到Android项目根目录
node_modules(文件夹。从之前 init React Native 项目里拷一份过来。因为 npm install 成功率很低,就算是用taobao的源,也很慢)
.flowconfig (JavaScript 静态类型检查工具配置文件)
.watchmanconfig(Facebook 开发的用来监视文件并且记录文件的改动情况,当文件变更就触发一些操作, 如:Enable Live Reload的功能)
index.android.js(文件。操作方式同上,注意 class 名称与下面 register 时名称要一致)
package.json(文件。操作方式同上,注意文件内容里的 name 和 react-native 版本号)
6.修改如下文件
.gitignore(在该文件里添加排除项,node_modules/ 和 npm-debug.log)
app/build.gradle (将 'com.android.support:appcompat-v7:23.2.1' 改为 'com.android.support:appcompat-v7:23.0.1')
gradle.properties (在文件末尾添加,android.useDeprecatedNdk=true)
注意:小坑一个,如果遇到。请按第6项修改,并且要保证 react-native 版本是0.21.0以上
歪果朋友也深受其害,https://github.com/facebook/react-native/issues/6152#issuecomment-200759453
java.lang.IllegalAccessError: Method 'void android.support.v4.net.ConnectivityManagerCompat.()' is inaccessible to class 'com.facebook.react.modules.netinfo.NetInfoModule' (declaration of 'com.facebook.react.modules.netinfo.NetInfoModule' appears in /data/app/package.name-2/base.apk)
at com.facebook.react.modules.netinfo.NetInfoModule.(NetInfoModule.java:55)
at com.facebook.react.shell.MainReactPackage.createNativeModules(MainReactPackage.java:62)
at com.facebook.react.ReactInstanceManagerImpl.processPackage(ReactInstanceManagerImpl.java:751)
at com.facebook.react.ReactInstanceManagerImpl.createReactContext(ReactInstanceManagerImpl.java:688)
at com.facebook.react.ReactInstanceManagerImpl.access$600(ReactInstanceManagerImpl.java:84)
代码地址:https://github.com/Kennytian/embedded,欢迎star
转载于:https://www.cnblogs.com/Kennytian/p/5325424.html
将React Native集成至Android原生应用相关推荐
- React Native 中的 Android 原生模块
当使用 React Native 开发 Android 应用时,你可能需要使用没有被 React Native 封装的模块.但你可以使用 Java 编写原生模块,然后选择性的暴露公共接口到 React ...
- React Native开发指南-在原生和React Native间通信
通过植入原生应用和原生UI组件两篇文档,我们学习了React Native和原生组件的互相整合.在整合的过程中,我们会需要在两个世界间互相通信.有些方法已经在其他的指南中提到了,这篇文章总结了所有可行 ...
- React Native – 使用 JavaScript 开发原生应用
前不久,Facebook 在F8开发者大会上正式开源了 React Native 项目.不过目前只有 iOS 版,Android 版还需要再等一段时间,这是最新的用 JavaScript 语言开发原生 ...
- React Native集成友盟推送
React Native集成友盟推送 android推送集成 1.导入SDK: (1)push文件夹位置: (2)将push文件夹直接复制粘贴到rn项目android目录下,目录结构如下: 2.添加修 ...
- React Native 集成分享第三方登录功能分享第三方登录模块开发(iOS)
期待已久的新课上线啦!解锁React Native开发新姿势,一网打尽React Native最新与最热技术,点我Get!!! 在我们常用的App中经常会看到分享与第三方登录的功能,可以说分享与第三方 ...
- android 回退函数,详解React Native监听Android回退按键与程序化退出应用
详解React Native监听Android回退按键与程序化退出应用 发布时间:2020-09-29 09:25:52 来源:脚本之家 阅读:137 作者:lqh 详解React Native监听A ...
- 回退监听android,详解React Native监听Android回退按键与程序化退出应用
详解React Native监听Android回退按键与程序化退出应用 前言 我们知道Android回退按键,会控制页面返回, 并且退出应用并非真正意义退出,仍在后台运行,所以在某些场景下需要监控an ...
- React Native 与 嵌入Android原生与Activity页面互相跳转
前言 RN作为混合开发,肯定需要与原生直接的页面跳转,这里也属于和原生端通信的知识模块.我们知道Android的页面跳转是通过Intent.Rn是通过路由,而两者直接页面互相跳转就需要原生借助JS暴露 ...
- React Native 集成极光推送 jpush-react-native
转载:https://www.jianshu.com/p/a71512a8f921 概述 jpush-react-native 是极光推送官方开发的 React Native 版本插件,可以快速集成推 ...
- Android之React Native平台与Android本地模块之间的调用
Native 模块(Android) 有时候APP需要做出React Native平台没有的功能,你也许会想用一些存在的java代码去解决问题,而不是用javascript脚本去去解 ...
最新文章
- 刷了一个月算法,终于拿到了double的offer
- 2、.net NVelocity中原生javascript ajax封装使用
- 华为主题包hwt下载_华为主题 | 星黛露
- idea从gitlab拉项目到本地_Git入门-基础命令,用github免费服务器域名部署小项目...
- SFP模块光信号强度知识介绍
- CF196E Opening Portals
- 使你的C/C++代码支持Unicode
- Knowledge Graph - NLP
- oa系统在线试用,零成本开始研发协作免费试用
- 新装主机测试性能软件,装机必看 如何快速测试电脑性能?
- 大众点评文字反爬破解
- 《线性代数》学习之———第一章 矩阵与方程组(1.1线性方程组)
- 五万字,快速读完《图解TCP/IP》核心内容!!!(建议收藏)
- linux魔兽世界黑屏怎么办,魔兽世界8.1登陆界面黑屏怎么办 魔兽世界8.1登陆界面黑屏解决方法...
- 工作量单位-人月、人日、人时 详解
- h61 nvme硬盘_切割SN520amp;amp;对比主流NVME2242amp;amp;无硬盘盒迁移系统
- pr模板.mogrt格式安装方法
- 国内列为一级学报的期刊
- MATLAB函数极限和微分运算
- oracle补充日志
热门文章
- kkfile跨域预览_kkFileView开源项目实现office各种格式在线预览
- python 多行缩进_【python cookbook】改变多行文本字符串的缩进
- hdmi 屏幕旋转 树莓派_使用树莓派的轻量级远征工具套装
- 产生随机数(rand()函数和srand()函数)的含义
- 爬虫伪装请求头-fake-useragent
- 图像频域增强:傅里叶变换
- TensorFlow by Google神经网络深度学习的 Hello World Machine Learning Foundations: Ep #1 - What is ML?
- 漫话:如何给女朋友解释什么是反向代理、正向代理?
- 汇编程序实现快速排序_用Python 3实现快速排序和插入排序代码详解
- 矩阵论10,11,12作业