React Native添加Android原生模块

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

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

React Native添加Android原生模块_第1张图片

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

React Native添加Android原生模块_第2张图片

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

React Native添加Android原生模块_第3张图片

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

React Native添加Android原生模块_第4张图片

至于具体的逻辑,不难,唯一需要提的一点就是 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的一个版本,不是原来的

React Native添加Android原生模块_第5张图片

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

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

欢迎讨论

你可能感兴趣的:(桥接android模块,android,native)