利用RN与原生通信开发的模块独立出来,不管是给自己的多个项目共用,或者开源给到别人用,这都是一件很优秀的事情。
就以我自己开发的一个在ios和android通用的react-native-face-verify组件为例来讲一下,开发插件框架搭建
1 创建并实现
1.1 创建自定义组件模版项目
1.1.1 安装react-native-create-library
目前官方推荐的是create-react-native-module
本文介绍还是基于react-native-create-library
$ npm install-g react-native-create-library
1.1.2 创建模板项目
我们用命令react-native-create-library创建项目,并指定平台为ios,android,指定android中的package,其他参数可以自行参考在react-native-create-library在github上的文档说明,这里就不赘述
$ react-native-create-library--package-identifier com.may.faceverify--platforms android,ios faceverify
我们重命名一下项目名
$ mv verify react-native-face-verify
有人可能会说,楼主为什么不直接生成react-native-face-verify的项目,而要先生成faceverify再重命名。其实这是一个小技巧,因为利用react-native-create-library生产的项目,一些跟组件相关的名称或者类会默认加上react-native或者RN前缀。
例如,如果你的初始项目名是react-native-face-verify,那么package.json中定义的组件名将是react-native-react-native-face-verify,android模块中定义的相关类会是RNReactNativeFaceverifyModule.java,这不是我们想要的。
ok, 我们继续。
现在的目录结构:
$ tree
└── react-native-face-verify
├── README.md
├── android
│ ├── build.gradle
│ └── src
│ └── main
│ ├── AndroidManifest.xml
│ └── java
│ └── com
│ └── reactlibrary
│ ├── RNFaceverifyModule.java
│ └── RNFaceverifyPackage.java
├── index.js
├── ios
│ ├── RNFaceverify.h
│ ├── RNFaceverify.m
│ ├── RNFaceverify.podspec
│ ├── RNFaceverify.xcodeproj
│ │ └── project.pbxproj
│ └── RNFaceverify.xcworkspace
│ └── contents.xcworkspacedata
└── package.json
生成好组件项目后,就可以开始编写实现代码了或之前写好的代码复制到对应文件夹下