introduce

In fact, most of the React project was dealing with components. I always wanted to build my own component library, but I didn’t have a good solution. After seeing some codes of Beeshell and @ant-Design/React-Native through their iteration, They introduced some of their own libraries, and many things felt uncontrollable and dependent on them, so they sorted out their own needs at this time and tried to come up with a solution

demand

  • The react-native component library is a library of react-native components that you can use in your project
  • Component library documentation, preferably with a demo
  • Streamline processes, including code uploads, tagging, etc

The solution

According to the requirements of the difficulties to find their own solutions

Component library

As a pure solution article, there is no need to describe the advantages and disadvantages of each component library. The author compares 7 or 8 solutions on GitHub and various technical articles, and finally adopts react-Native Builder-Bob as the solution of the component library

  • versatile

  • The packaging function meets the requirements

  • Built-in release-it, commitLint

At that time, I was also attracted by this: one-click package, upload, tag, and add commitLint to automatically generate Changelog

The document

The documents I have used include Vuepress, Dumi and Storybook. I briefly read Storybook without further study. In fact, I read Storybook first and then dumi in the middle. Originally, dumi supports the direct generation of component library documents, so I decided to try to use it. Vuepress was used in my blog before, and there was no introduction of component library, so I didn’t have an in-depth study

Finally, dumI is adopted as the document solution. From the document, you will know that DumI has a complete scaffolding of component library. However, the problem is that the React-Native component library is not supported until 2021-01-18 when I come up with the solution, but it can be applied to web and mobile terminals. If you are not an RN project, using Dumi directly is also a good component library solution

The results of

The document

Function:

  • The demo function
  • The sample code
  • API Interface Description
  • Customize the MD page

I’ll write it in ts hereBaseStepper 、 CheckboxTwo components, see the effect is ok

Pack and upload to NPM

Upload via relex-it package, where the package name uploaded to NPM is: lalala-component-rn

You can install it into your project and try it out

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

The project address

Rn-components, thank you for pointing the star