react-native 创建私有库

本文详细介绍如何从零开始创建并维护一个私有的React Native库,包括使用工具库进行快速搭建、配置原生模块及第三方依赖,以及如何在本地项目中正确引用私有库。

经常看到react-native的库,通过npm安装,怎么才能实现自己的库呢?
我没有上传到npm的公共仓库中,只是我的GitHub上面的私有库,通过指定地址也可以实现私有库,我以微信的SDK为例,这里具体实现参考了react-native-wechat这个库,因为微信和iOS的审核都修改对了WKWebView处理,而这个库没有完成升级,所以我自己实现了一个升级的私有库,基本上代码没有修改,只是方便以后使用。
进入正题

一、新建私有库
  1. 参考这个工具库,新建要开发的库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可以参考官网的文档原生通信

在这里插入图片描述

  1. 以我的的微信为例,假如需要三方库怎么办呢,另外三方库还可能依赖系统或者其他的三方库(主要是iOS,Android的话直接配置gradle就可以了),这里就需要配置podspec文件,微信可以通过pod集成,所以可以设置成依赖库,参考在这里插入图片描述
  2. 到上面这一步,库基本就完成了,可以上传到Git,在package.json文件中指定地址
"wxlib": "https://github.com/toywang/wxlib.git"
二、遇到的问题
  1. 在example中可以直接修改代码,代码会自动更新到库中,原因在package.json中,这里做了一个软连接,实际修改的还是库,这里困惑了很久,其他的文档,告诉我用file,但其实link才对,也许是跟版本有关
  "dependencies": {
    "react-native-qw-wechat": "link:../",
    "react": "16.11.0",
    "react-native": "0.62.2"
  },
  1. 如果新建了文件怎么办?在iOS中,我用到react-native中的DeviceEventEmitter,所以我新建了一个类,但是这个类并没有同步更新,这个时候,需要重新yarn install安装私有库,执行完以后,pod install,注意新版本的react-native不需要react-native link,但是需要执行pod install
  2. 还有一个不常有的错误,在react-native-qw-wechat目录里面也有一个package.json,手欠的我执行了一个yarn install,导致了运行example出现了一下错误

这是我自己的私有库,开发的时候需要换成你的Git地址安装 yarn add https://github.com/toywang/react-native-qw-wechat

{ "name": "AwesomeProject", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "start": "react-native start", "test": "jest", "lint": "eslint .", "postinstall": "patch-package", "generate:icons": "node generateIconMap.js" }, "dependencies": { "@ant-design/icons-react-native": "^2.3.2", "@ant-design/react-native": "^5.0.1", "@react-native-async-storage/async-storage": "^1.19.0", "@react-native-community/cameraroll": "^4.0.0", "@react-native-community/masked-view": "0.1.11", "@react-native-community/segmented-control": "^2.1.1", "@react-native-community/slider": "^3.0.3", "@react-native-community/viewpager": "^4.1.6", "@react-native-picker/picker": "^1.16.8", "@react-native-segmented-control/segmented-control": "^2.5.7", "@react-navigation/native": "^6.1.7", "@react-navigation/native-stack": "^6.9.12", "@rneui/base": "^4.0.0-rc.7", "@rneui/themed": "^4.0.0-rc.8", "@taoqf/react-native-mqtt": "^3.0.4", "buffer": "^6.0.3", "d3-shape": "^1.3.7", "dns.js": "^1.0.1", "events": "^3.3.0", "jcore-react-native": "^2.0.0", "jpush-react-native": "^2.9.0", "minio": "^7.0.15", "mqtt": "^5.14.0", "node-libs-react-native": "^1.2.1", "process": "^0.11.10", "react": "17.0.2", "react-dom": "^17.0.2", "react-native": "0.68.0", "react-native-background-timer": "^2.4.1", "react-native-camera": "^4.2.1", "react-native-compressor": "^1.12.0", "react-native-device-info": "^8.1.3", "react-native-elements": "^3.4.2", "react-native-exception-handler": "^2.10.10", "react-native-fs": "^2.18.0", "react-native-gesture-handler": "^1.10.3", "react-native-get-location": "^2.1.0", "react-native-get-random-values": "^1.4.0", "react-native-image-picker": "^3.8.1", "react-native-image-zoom-viewer": "^3.0.1", "react-native-level-fs": "^3.0.0", "react-native-linear-gradient": "^2.8.3", "react-native-modal-dropdown": "^1.0.2", "react-native-os": "^1.0.1", "react-native-permissions": "3.8.0", "react-native-reanimated": "^2.14.4", "react-native-safe-area-context": "3.3.2", "react-native-screens": "3.15.0", "react-native-signature-canvas": "^4.1.0", "react-native-signature-capture": "^0.4.12", "react-native-sound": "^0.11.1", "react-native-sqlite-storage": "^4.1.0", "react-native-svg": "^12.4.3", "react-native-svg-charts": "5.4.0", "react-native-table-component": "^1.2.2", "react-native-tcp": "^3.2.1", "react-native-thermal-receipt-printer": "^1.2.0-rc.2", "react-native-udp": "^4.1.7", "react-native-vector-icons": "^9.2.0", "react-native-web": "^0.17.1", "react-native-webview": "^11.26.0", "react-redux": "^7.2.0", "readable-stream": "1.0.33", "redux": "^4.0.5", "redux-thunk": "^2.3.0", "stream": "^0.0.3", "stream-browserify": "^1.0.0" }, "devDependencies": { "@babel/core": "^7.12.9", "@babel/plugin-transform-class-properties": "^7.27.1", "@babel/plugin-transform-private-methods": "^7.27.1", "@babel/plugin-transform-private-property-in-object": "^7.27.1", "@babel/runtime": "^7.12.5", "@react-native-community/cli-doctor": "^10.0.0", "@react-native-community/eslint-config": "^2.0.0", "@react-navigation/native": "^6.1.7", "@react-navigation/native-stack": "^6.9.12", "babel-jest": "^26.6.3", "babel-plugin-import": "^1.13.8", "eslint": "^7.32.0", "jest": "^26.6.3", "metro-react-native-babel-preset": "^0.68.0", "patch-package": "^6.5.1", "react-native-version-check": "^3.5.0", "react-test-renderer": "17.0.2", "rn-nodeify": "^10.3.0" }, "jest": { "preset": "react-native" }, "react-native": { "dns": "dns.js", "net": "react-native-tcp", "os": "react-native-os", "fs": "react-native-level-fs", "_stream_transform": "readable-stream/transform", "_stream_readable": "readable-stream/readable", "_stream_writable": "readable-stream/writable", "_stream_duplex": "readable-stream/duplex", "_stream_passthrough": "readable-stream/passthrough", "stream": "stream-browserify", "tls": false }, "browser": { "dns": "dns.js", "net": "react-native-tcp", "os": "react-native-os", "fs": "react-native-level-fs", "_stream_transform": "readable-stream/transform", "_stream_readable": "readable-stream/readable", "_stream_writable": "readable-stream/writable", "_stream_duplex": "readable-stream/duplex", "_stream_passthrough": "readable-stream/passthrough", "stream": "stream-browserify", "tls": false } } npm i后哪些不会下载?
08-16
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值