\

记一次搭建react-native UI组件库

1，创建一个组织，如图：

1，找到Your organizations

2，创建组织

3，填写信息

2，本地创建：

创建目录@john-ui-kit，参考：docs.npmjs.com/organizatio…

创建react-native的UI库：@john-ui-kit/react-native

cd @john-ui-kit && mkdir react-native && cd react-native

1，初始化

yarn init

question name (test): // 包名
question version (1.0.0): //版本号
question description: 测试组件库 // 描述
question entry point (index.js): // 入口文件，
question repository url: // 资源Url
question author: John // 作者
question license (MIT): // 协议
question private: // 是否是私有package

2，package.json详细：

（参考：docs.npmjs.com/cli/v7/conf…）

3，目录结构：

源码：github.com/john-ui-kit…

4，编写组件

在src/components中随意编写tsx组件，最后只要在src根目录导出index即可。如下：（index.ts）

3，本地调试：

主要是在example当中创建，这里使用expo创建app，

调试：

调用yarn example:start

说明：

在example当中需要引用根目录src当中的包，这时需要在example中的ts config中配置：

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "paths": {
      "@john-ui-kit/react-native": ["../src/index"] // 这里指定包的名称
    },
  },
}

引用本地组件：

3，构建与发布

react-native-builder-bob：

构建工具：（参考：github.com/callstack/r…）

package.json中插入配置：

打包：

使用bob build，或者 yarn build

会将src当中的代码打包进lib当中，遵循commonjs，和es module两种模块系统

release-it：

发布工具（可同时发布到npm，github，参考：npmjs.com/package/rel…）

.release-it.json：

{
  "git": {
    "commitMessage": "chore: release ${version}", // 提交信息
    "tagName": "v${version}" // 标签
  },
  "npm": {
    "publish": true
  },
  "github": {
    "release": false
  },
  "plugins": {
    "@release-it/conventional-changelog": {
      "preset": "angular"
    }
  }
}

发布：

执行release-it ，或者yarn release

4，源码参考：

github.com/john-ui-kit…