\

Remember to build the React-Native UI component library once

1. Create an organization, as shown below:

1. Find Your Organizations

2. Create an organization

3. Fill in the information

2, create locally:

Create a directory @ John – UI – kit, reference: docs.npmjs.com/organizatio…

Create react-native UI library: @john-ui-kit/ React-native

cd @john-ui-kit && mkdir react-native && cd react-native
Copy the code

1. Initialize

yarn init
Copy the code

Question name (test): // Package name // Describe question Entry point (index.js): // question repository URL: // John // author question license (MIT): // Protocol Question Private: // Whether it is a private packageCopy the code

2, package.json details:

(reference: docs.npmjs.com/cli/v7/conf…).

3. Directory structure:

Source: github.com/john-ui-kit…

4. Write components

Feel free to write a TSX component in SRC/Components and export index at the SRC root. As follows :(index.ts)

3. Local debugging:

This is basically created in Example, where expo is used to create the app,

Debug:

Call the yarn example: start

Description:

In example, you need to reference the package in the root directory SRC. In this case, you need to configure the ts config in example:

{ "extends": "expo/tsconfig.base", "compilerOptions": { "paths": { "@john-ui-kit/react-native": ["../ SRC /index"] // Here specify the package name},},}Copy the code
Referencing a local component:

3. Build and publish

The react – native – builder – Bob:

Build tools: (reference: github.com/callstack/r…)

Insert configuration in package.json:

Packaging:

Use Bob build, or Yarn build

Code from SRC is packaged into lib, following commonJS and ES Module systems

Release – it:

Publishing tools (available to NPM, Github, npmjs.com/package/rel…)

. Release – it. Json:
{" git ": {" commitMessage" : "chore: release ${version}", / / submit information "tagName" : "v ${version}" / / label}, "NPM" : {" publish ": true }, "github": { "release": false }, "plugins": { "@release-it/conventional-changelog": { "preset": "angular" } } }Copy the code
Release:

Run release-it or yarn release

4, source reference:

Github.com/john-ui-kit…