React Native添加Android原生模块

新项目决定开始使用React Native,故也不得不学习新的知识。React Native简介此不做赘述,官网有详细的介绍。因RN出来的时间还算很短,所以很多东西并不是很完善...比如第三方库的丰富度上...

拿真实例子举例,我这边的截图功能采用的是react-native-view-snapshot这个第三方截图....但是忘源码一看,大写的懵逼,Android竟然是暂不支持


好的,那只能做扩展了,首先fork作者的开源项目,在其上编写Android的逻辑代码(实际上Android上的截图逻辑也较为简单,不知道为什么暂不支持),先看文件目录


实际上用到的文件夹只有2个,ReactTestPackage.java和SnapshotterModule.java,那么进入其中看具体实现,首先是ReactTestPackage


方法足够简单,只需要在creatNativeModules里将模块注册进去就好了,然后是SnapshotterModule


至于具体的逻辑,不难,唯一需要提的一点就是uiManager.addUIBlock和View dView = nativeViewHierarchyManager.resolveView(tag);

该段逻辑是为将RN的视图通过tag标识传给native层,并将此tag转化为View视图,从而实现将View视图截屏保留成图片

最后就是项目的配置问题了,曾经折腾了我好久

在RN项目的配置中,需要在android模块的setting.gradle文件中将这个工程导入(工程模块都在node_modules中),如下

include ':react-native-view-snapshot' project(':react-native-view-snapshot').projectDir = new File(rootProject.projectDir,'../node_modules/react-native-view-snapshot/android')
同时在app目录下的build.gradle文件下将该工程依赖进去

compile project(':react-native-view-snapshot')
做完这些还不够,最后还得在项目的package.json下更改文件路径,毕竟只是我fork的一个版本,不是原来的


如上配置完以后,打开git命令行,执行npm install命名,就会自动从我的仓库去下载安装

附上github地址ZZombiee/react-native-view-snapshot,各位有兴趣的话也可以尝试fork,更改为自己的仓库

欢迎讨论

相关文章

一、前言 在组件方面react和Vue一样的,核心思想玩的就是组件...
前言: 前段时间学习完react后,刚好就接到公司一个react项目...
前言: 最近收到组长通知我们项目组后面新开的项目准备统一技...
react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...