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
、 Checkbox
Two 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