React-Native 怎么样构建一个 lib 作为其它项目的依赖呢?其实也很简单,接下来,我们一起来学习一下吧。
首先,您得了解下 react-native-create-module
这个工具,通过它 react-native-create-module
可以快速创建一个包含 Adroid 和 iOS 系统下的模块。
下面我简单介绍下如何安装和使用 react-native-create-module
NPM 模块详情:https://www.npmjs.com/package/create-react-native-module
GitHub 地址:https://github.com/brodybits/create-react-native-module
安装 react-native-create-module
安装 react-native-create-module
还是很简单的,利用 npm 或者 yarn 将其全局安装到自己环境就好了
# npm 安装方法
npm install -g create-react-native-module
# yarn 安装方法
yarn add -g create-react-native-module
构建一个 lib 项目
进入到一个空目录,这里的目录以及模块名都是你自己决定的,如:
代码语言:javascript复制# 进入 /workspace/rn/ 目录
cd /workspace/rn/
# 创建一个叫 `demo-lib` 的模块,如:
create-react-native-module demo-lib --package-identifier com.pzj.demo
这样,我们就创建好了一个名叫 demo-lib
到项目,com.pzj.demo
是它的包名。
在使用create-react-native-module
创建模块时,可以配置一些参数,如:
Usage: create-react-native-module [options] <name>
Options:
-V, --version 显示版本号
--prefix <prefix> 组件模块的名字 (默认值: ``)
--module-name <moduleName> 要在其中使用的模块库包名,也就是要写到 package.json 中的 name。 默认值: react-native-(name in param-case)
--module-prefix <modulePrefix> 如果指定了模块名,则忽略组件模块的模块前缀 (默认值: `react-native`)
--package-identifier <packageIdentifier> [Android] Android 模块使用的 Java 包标识符 (默认值: `com.reactlibrary`)
--platforms <platforms> 模块将被创建为什么平台。用 , 分隔 (默认值: `ios,android`)
--tvos-enabled 生成启用 tvOS 构建的模块( 需要,react-native-tvos 最低版本为0.60,并启用 iOS 平台)
--github-account <githubAccount> 库模块所在的 github 帐户 (默认值: `github_account`)
--author-name <authorName> 模块作者的名字 (默认值: `Your Name`)
--author-email <authorEmail> 模块作者的邮箱 (默认值: `yourname@email.com`)
--license <license> 许可证类型 (默认值: `MIT`)
--view 将模块生成为一个非常简单的原生视图组件
--use-apple-networking [iOS] 在 podspec 中使用 “AFNetworking” 依赖项作为示例,并在 iOS 代码中使用它
--generate-example 生成一个示例项目并将库模块链接到它,需要同时安装 react-native-cli 和 yarn
--example-name <exampleName> 示例项目的名称 (默认值: `example`)
--example-react-native-version <version> 对生成的示例项目使用 React native 版本 (默认值: `react-native@latest`)
--write-example-podfile [iOS] 不支持实验特性:写入(或覆盖)示例 ios/Podfile
-h, --help 输出帮助信息
发布 lib 项目到 npm
1、注册一个 npm 账号
您可以在 www.npmjs.com 官方网站中创建你的 npm 账号。
2、用命令行登录 npm 账号
代码语言:javascript复制npm login --registry=http://registry.npmjs.org
输入用户名和密码,登录完成后,您可以用 npm whoami
命令来查看是否成功登陆成功,如:
npm whoami
3、修改 demo-lib
项目目录下的 package.json
文件
package.json
文件中定义了组件名、版本号、作者、描述、依赖等发布信息,你需要修改为自己的信息,比如:
{
"name": "react-native-demo-lib",
"version": "1.0.0",
"description": "a react-native demo-lib for android and ios",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [
"react-native",
"android",
"advert",
"gdt",
"tt"
],
"author": {
"name": "qhkj",
"email": "service@qianhaikeji.cn"
},
"license": "MIT",
"repository": {
"type": "git",
"url": "git@github.com:pengzhenjin/react-native-demo-lib.git"
},
"devDependencies": {
"react": "16.9.0",
"react-native": "^0.61.1"
},
"peerDependencies": {
"react-native": ">=0.47"
}
}
4、发布 npm 包
进入 react-native-demo-lib
项目根目录,执行 npm publish --registry=http://registry.npmjs.org
即可,如:
$ cd react-native-demo-lib
$ npm publish --registry=http://registry.npmjs.org
发布成功后,您可以进入www.npmjs.com 官方网站中查看是否发布成功。