前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React-Native 构建 lib,并发布到 npm

React-Native 构建 lib,并发布到 npm

作者头像
子晋
发布2022-01-18 21:27:18
1.6K0
发布2022-01-18 21:27:18
举报
文章被收录于专栏:子晋城子晋城

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 将其全局安装到自己环境就好了

代码语言:javascript
复制
# 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 创建模块时,可以配置一些参数,如:

代码语言:javascript
复制
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 命令来查看是否成功登陆成功,如:

代码语言:javascript
复制
 npm whoami

3、修改 demo-lib 项目目录下的 package.json 文件

package.json 文件中定义了组件名、版本号、作者、描述、依赖等发布信息,你需要修改为自己的信息,比如:

代码语言:javascript
复制
{
  "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 即可,如:

代码语言:javascript
复制
$ cd react-native-demo-lib
$ npm publish --registry=http://registry.npmjs.org

发布成功后,您可以进入www.npmjs.com 官方网站中查看是否发布成功。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-08-08,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 安装 react-native-create-module
  • 构建一个 lib 项目
  • 发布 lib 项目到 npm
相关产品与服务
访问管理
访问管理(Cloud Access Management,CAM)可以帮助您安全、便捷地管理对腾讯云服务和资源的访问。您可以使用CAM创建子用户、用户组和角色,并通过策略控制其访问范围。CAM支持用户和角色SSO能力,您可以根据具体管理场景针对性设置企业内用户和腾讯云的互通能力。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档