开发自己的react native插件

利用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

生成好组件项目后,就可以开始编写实现代码了或之前写好的代码复制到对应文件夹下

参考:https://www.jianshu.com/p/091a68ea1ca7

你可能感兴趣的:(开发自己的react native插件)