React Native添加Android原生模块

前端之家收集整理的这篇文章主要介绍了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相关文章