经常看到react-native的库,通过npm安装,怎么才能实现自己的库呢?
我没有上传到npm的公共仓库中,只是我的GitHub上面的私有库,通过指定地址也可以实现私有库,我以微信的SDK为例,这里具体实现参考了react-native-wechat这个库,因为微信和iOS的审核都修改对了WKWebView
处理,而这个库没有完成升级,所以我自己实现了一个升级的私有库,基本上代码没有修改,只是方便以后使用。
进入正题
一、新建私有库
- 参考这个工具库,新建要开发的库react-native-module
安装这个库
npm install -g react-native-cli yarn
npm install -g create-react-native-module
新建你要创建的库,这个工具可以自动创建example,所以可以直接在里面开发测试完成后,提交到git。
##QWWechat是库名 --package-identifier指定了Android的包名,具体参考文档
create-react-native-module QWWechat --package-identifier io.qw.wechat --generate-example
执行命令后,可以看到库的一些信息
2. 创建完成后,目录结构如下,这之后,就可以开发原生和react-native了,原生iOS和Android可以参考官网的文档原生通信
- 以我的的微信为例,假如需要三方库怎么办呢,另外三方库还可能依赖系统或者其他的三方库(主要是iOS,Android的话直接配置gradle就可以了),这里就需要配置
podspec
文件,微信可以通过pod集成,所以可以设置成依赖库,参考 - 到上面这一步,库基本就完成了,可以上传到Git,在
package.json
文件中指定地址
"wxlib": "https://github.com/toywang/wxlib.git"
二、遇到的问题
- 在example中可以直接修改代码,代码会自动更新到库中,原因在
package.json
中,这里做了一个软连接,实际修改的还是库,这里困惑了很久,其他的文档,告诉我用file
,但其实link
才对,也许是跟版本有关
"dependencies": {
"react-native-qw-wechat": "link:../",
"react": "16.11.0",
"react-native": "0.62.2"
},
- 如果新建了文件怎么办?在iOS中,我用到react-native中的
DeviceEventEmitter
,所以我新建了一个类,但是这个类并没有同步更新,这个时候,需要重新yarn install
安装私有库,执行完以后,pod install
,注意新版本的react-native
不需要react-native link
,但是需要执行pod install
- 还有一个不常有的错误,在
react-native-qw-wechat
目录里面也有一个package.json
,手欠的我执行了一个yarn install
,导致了运行example出现了一下错误
这是我自己的私有库,开发的时候需要换成你的Git地址安装
yarn add https://github.com/toywang/react-native-qw-wechat