react-native 组件库解决方案

2,979 阅读2分钟

介绍

在react项目实际上大部分就是在跟组件打交道,一直有一个想要做一个自己组件库的想法,可是一直没有一个好的解决方案,看了 beeshell@ant-design/react-native 的部分代码经过他们的迭代,引入了一些他们自己的库,很多东西感觉都是不可控的,依赖于他们, 所以此时整理出自己的需求,尝试拿出一个解决方案出来

需求

  • 基础功能当然是一个react-native组件库啦,上传到npm使用方法通过引入可以在项目当中用到自己想用的组件
  • 组件库的文档,最好有demo演示
  • 流程化,包含上传代码,打tag等

解决方案

根据需求的难点去找各自的解决方案

组件库

作为纯解决方案文章,不赘述各个组件库优劣对比,作者在GitHub上和各个技术文章上对比了有7,8个解决方案,最后采用了 react-native-builder-bob 来作为组件库解决方案

  • 功能多样
  • 打包功能满足需求
  • 内置release-it,commitlint 当时看到这个也是比较吸引我的地方,一键打包、上传、打tag,加入commitlint自动生成changelog

文档

用过的文档有vuepressdumistorybook,storybook就简单的看了下没有深入研究,实际上我是先看的storybook,看了一半又去看dumi,在dumi文档中组件库几个关键字瞬间吸引了我,原来这个dumi支持直接生成组件库文档,当时就决定尝试用用,vuepress是之前写自己的blog用过,没有对组件库相关的介绍所以也就没有深入研究了

最后文档采取了 dumi 来作为文档解决方案,看文档你会知道dumi有组件库的完整的脚手架,可是是问题是在于到我拿出解决方案的今天2021-01-18为止是不支持react-native组件库的,但是支持到web,与移动端,如果不是rn项目,直接使用dumi也是一个好的组件库解决方案

结果

文档

功能:

  • 演示功能
  • 示例代码
  • api接口说明
  • 自定义md页面

在这里用ts写了 BaseStepperCheckbox 两个组件,看效果还是可以的

打包上传npm

通过 release-it 打包上传,这里上传到npm的包名:lalala-components-rn

可以安装到你的项目当中使用试一试

yarn add lalala-components-rn
import { BaseStepper } from 'lalala-components-rn';

项目地址

rn-components,谢谢帮我点星星