一、组件库使用方式
npm install --save 组件库名称
二、创建组件库
1、安装 react-native-create-library
- Github地址： react-native-create-library
npm install -g react-native-create-library
2、创建组件模板
react-native-create-library --package-identifier com.rabbits.ui --platforms android,ios rabbits-ui
- 操作符说明
Usage: react-native-create-library [options] <name>
Options:
-h, --help output usage information
-V, --version output the version number
-p, --prefix <prefix> The prefix for the library (Default: `RN`)
--module-prefix <modulePrefix> The module prefix for the library (Default: `react-native`)
--package-identifier <packageIdentifier> (Android only!) The package name for the Android module (Default: `com.reactlibrary`)
--namespace <namespace> (Windows only!) The namespace for the Windows module
(Default: The name as PascalCase)
--platforms <platforms> Platforms the library will be created for. (comma separated; default: `ios,android,windows`)
--github-account <github_account> The github account where the library is hosted (Default: `github_account`)
--author-name <name> The author's name (Default: `Your Name`)
--author-email <email> The author's email (Default: `yourname@email.com`)
--license <license> The license type of this library (Default: `Apache-2.0`)
--generate-example <shouldGenerate> Will generate a RN example project and link the new library to it (Default: `false`)
- 项目结构
└── react-native-rabbits-ui
├── .gitignore // git忽略文件
├── .npmignore // npm忽略文件
├── README.md
├── android
│ ├── build.gradle
│ └── src
│ └── main
│ ├── AndroidManifest.xml
│ └── java
│ └── com
│ └── rabbits
│ └── ui
│ ├── RNRabbitsUiModule.java
│ └── RNRabbitsUiPackage.java
├── index.js
├── ios
│ ├── RNRabbitsUi.h
│ ├── RNRabbitsUi.m
│ ├── RNRabbitsUi.podspec
│ ├── RNRabbitsUi.xcodeproj
│ │ └── project.pbxproj
│ └── RNRabbitsUi.xcworkspace
│ └── contents.xcworkspacedata
└── package.json
.gitignore和.npmignore根据自己需求选择自创建
3、编写组件代码
- 在根目录创建
src文件夹，创建自己组件js文件，这里创建一个名为TouchableRabbit的组件，代码如下：
/**
* 防抖按钮
* @author lawrence
*/
import React, {PureComponent} from "react";
import {TouchableOpacity, ViewPropTypes} from "react-native";
type Props = {
effectTime: number, // 防抖时间
disabledStyle: ViewPropTypes.style // 按钮未激活样式
}
type State = {}
const DEBOUNCE_MILLISECOND = 300; // 多次点击，响应间隔时间
export default class TouchableRabbit extends PureComponent<Props, State> {
static defaultProps = {
effectTime: DEBOUNCE_MILLISECOND,
disableStyle: null,
};
_lastClickTime = 0; // 最后一次点击按钮时间
render() {
const {disabled, disabledStyle, onPress, style, activeOpacity} = this.props;
return (
<TouchableOpacity
{...this.props}
style={disabled ? disabledStyle : style}
activeOpacity={activeOpacity ? activeOpacity : 0.8}
onPress={() => !disabled && this._debouncePress(onPress)}
>
{this.props.children}
</TouchableOpacity>
)
}
_enable = () => {
const {props: {effectTime}, _lastClickTime} = this;
const time = Date.now();
const enable = !_lastClickTime || Math.abs(_lastClickTime - time) > effectTime;
enable && (this._lastClickTime = time);
return enable;
};
_debouncePress = onPress => {
this._enable() && !!onPress && onPress();
}
}
- 在根目录
index.js中导出，代码如下：
/**
* 组件导出
* @author lawrence
*/
import TouchableRabbit from "./src/TouchableRabbit";
export {
TouchableRabbit
}
- 项目中使用方式
import {TouchableRabbit} from "react-native-rabbits-ui";
export default class App extends Component<Props> {
render() {
return (
<TouchableRabbit effectTime={400} onPress={()=>{}}
style={styles.enable} disabledStyle={styles.disable} disabled>
......其他组件
</TouchableRabbit>
);
}
}
三、在 npm 上发布组件
1、修改根目录中 package.json 文件，以组件库react-native-rabbits-ui 为例，内容如下：
{
"name": "react-native-rabbits-ui",
"version": "1.0.0",
"description": "common component library for android and iOS",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"react",
"react-native"
],
"author": "lawrence",
"license": "MIT",
"devDependencies": {},
"peerDependencies": {
"react": ">=16.0.0",
"react-native": ">=0.55.0",
"prop-types": ">=15.0.0"
}
}
- name 组件库名称
- version 组件库版本，每次升级都必需上调版本号
- main 入口
- peerDependencies 组件库依赖。不了解怎么使用？click me！
2、上传npm
1、注册账号 https://www.npmjs.com/
2、终端执行命令npm adduser --registry http://registry.npmjs.org
3、根据提示输入第一步中注册好的账号、密码、邮箱
4、将当前路径切换到要发布的模板的文件夹中（保证有package.json文件）
5、终端执行命令npm publish --registry http://registry.npmjs.org进行发布
6、发布成功后通过【https：//www.npmjs.com/+ 组件名 】可以在网页访问
四、本地测试
测试方法很多，这里只提供一种。
yarn add file:../react-native-rabbits-ui
react-native link react-native-rabbits-ui
-
yarn add + 路径会自动将react-native-rabbits-ui内容拷贝到node_modules目录下 -
react-native link + 组件名称会自动将react-native-rabbits-ui中的android和iOS原生代码链接到项目中
执行命令后，会在 package.json 中增加一行 "react-native-rabbits-ui": "file:../react-native-rabbits-ui" 依赖，如下：
{
"name": "RabbitsUiExample",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.8.3",
"react-native": "0.59.1",
"react-native-rabbits-ui": "file:../react-native-rabbits-ui"
},
"devDependencies": {
"@babel/core": "^7.3.4",
"@babel/runtime": "^7.3.4",
"babel-jest": "^24.5.0",
"jest": "^24.5.0",
"metro-react-native-babel-preset": "^0.53.1",
"react-test-renderer": "16.8.3"
},
"jest": {
"preset": "react-native"
}
}
到这里创建自己的npm组件库就算结束
组件库示例代码：https://gitee.com/ak-star/rn-rabbits-ui
网友评论