一、创建插件
1.安装插件功能
使用如下命令行,安装rn插件功能:
$ npm install -g react-native-create-library
2.创建插件
安装好插件功能后,我们可以创建自己的插件到指定的目录下:
$ react-native-create-library --package-identifier com.reactlibrary --platforms android,ios TestLibrary
3.插件结构
创建好插件后目录如下:
可以看到分别有android以及ios文件夹,内部结构和原生的项目结果一致,也就是说我们可以在android中进行自定义原生功能的开发。
我们来看下以android为例一个已经创建好的插件目录:
可以看到和原生项目结构完全一致,这里我们就可以利用原生功能开发了,但是如果需要调用这个插件中开发好的功能我们需要一个桥接.
4.开发桥接类
如图,桥接部分包含2个类,一个为module一个为package
然后我们看下2个类分别都装了什么
RNVinCodeLibraryModule.java:
首先包含了一个@ReactMethod,所有在Js\H5端调用的方法都需要使用这个进行注释代表接口可供其他平台调用。
Callback此对象作用在于回调数据,也就是将我们原生处理的数据传递给Js\H5,此对象的回调方法如下:
也就是通过invoke方法回调数据data以及url都是需要传递的数据,当然这些数据可以自定义我需要传递哪些。
RnVinCodeLibraryPackage:
这类主要作用在于注册刚刚编译好的module,也就是说我可以拥有多个module,也就是桥接类用来建立跨平台的桥梁,如下return一个NativeModule类型的集合,集合中添加了我们刚刚编写好的RNVinCodeLibraryModule类,所以注册这一步必不可少代表Js以及H5是否能调用我们的原生桥接类。
二、集成插件
本地导入集成
首先为什么需要本地集成的方式,因为对于RN来说一个插件正常情况下需要上传到npm服务,然后可供其他开发者进行下载,话句话说也就是可以开源出去,但是当你的插件涉及一些商用方向,这里最好的方式也就是本地集成方式。
1. 将我们刚刚编译好的插件copy到项目中的node_modules下
2. 在你的RN(如上图示例中VinSample)项目中的appllcation中配置:
这里将我们刚刚的RNVinCodeLibraryPackage也就是注册文件添加到我们的RN项目中并注册:
3.配置文件的配置
首先在RN项目中找到build.gradle以及app.iml文件,build文件代表的是android原生中的一些依赖等配置,app.iml是RN独有的项目配置文件原生的项目是不存在的,里面也是包含了此RN项目的一些配置信息
build.gradle中修改:
react-native-vin-ocr为我们刚刚制作好的并且放在node_modules文件夹下的插件
加入上图中的代码依赖此插件到RN项目中的安卓部分
app.iml中:
我们在这里的module标签下的component标签下找到类型为module的我们刚刚编译的插件,也就是说如果app.iml中包含此项配置,代表我们的插件到目前已经依赖成功.
注意:在集成本地库之后,在npm安装其他库之后可能导致本地导入库文件丢失需要重新copy到node_modules下
更新插件
使用如下命令更新,注意修改为自己项目的assets路径:
npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
插件发布到npm
这里简单说下发布插件到npm的方法,以下命令均为命令行,需要cd到插件目录下执行
1.你可以查看当前使用的registry:
$ npm config get registry
2.全局切换
npm官方registry为:http://registry.npmjs.org/
国内速度较快的为:https://registry.npm.taobao.org/
$ npm config set registry http://registry.npmjs.org/
3.添加账户
$ npm adduser
4.登陆账户
$ npm login
5. 需要去邮箱验证
6. 首次发布(24小时内不能重复发布一个库)
$ npm publish
7. 更新发布
$ npm version <update_type>
$ npm publish
8.删除发布npm包
(24小时内不能重复发布一个库)
$ npm unpublish --force