@5stones/react-native-slider 中文文档教程
@5stones/react-native-slider
一个真正简单的 react-native 滑块。
Motivation
我们需要一个滑块:
- Based on
react-native-gesture-handler
. - Simple.
每个其他滑块要么基于 react-native
的手势处理程序,要么是几百行代码并且调试起来似乎不必要地复杂。 因此,我们构建了一个少于 200 行代码的滑块,并使用了 react-native-gesture-handler
。
Installation
npm install @5stones/react-native-slider
Usage
import React from 'react';
import { View } from 'react-native';
import Slider from "@5stones/react-native-slider";
const Screen: React.FC = () => {
return (
<View>
<Slider/>
</View>
);
};
Props
Name | Optional | Type | Description |
---|---|---|---|
value | :whitecheckmark: | number | A numeric value allowing between the minimumValue and maximumValue allowing you to control the position of the slider. |
onValueChange | :whitecheckmark: | (value: number) => void | A callback function allowing you to receive updates of the slider position. |
thumbSize | :whitecheckmark: | number | Specify the size of the thumb (this is important as it's used to calculate positions). |
minimumValue | :whitecheckmark: | number | The minimum bound of the sliders value. |
maximumValue | :whitecheckmark: | number | The maximum bound of the sliders value. |
defaultContainerWidth | :whitecheckmark: | number | A default value for the width of the container (which will get overwritten dynamically after layout). |
touchableContainerStyle | :whitecheckmark: | ViewStyle | A style object allowing you control over the touch target container. |
containerStyle | :whitecheckmark: | ViewStyle | A style object allowing you control over the container. |
thumbStyle | :whitecheckmark: | ViewStyle | A style object allowing you control over the thumb. |
minimumTrackStyle | :whitecheckmark: | ViewStyle | A style object allowing you control over the minimum track. |
maximumTrackStyle | :whitecheckmark: | ViewStyle | A style object allowing you control over the maximum track. |
Release
此项目的标准发布命令是:
npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease | from-git]
此命令将:
- Generate/update the Changelog
- Bump the package version
- Tag & pushing the commit to GitHub & NPM
例如
npm version 1.2.17
npm version patch // 1.2.17 -> 1.2.18
Contributing
,请参阅贡献指南 以了解如何为存储库和开发工作流程做出贡献。
License
麻省理工学院
@5stones/react-native-slider
A truly simple react-native slider.
Motivation
We needed a slider that was:
- Based on
react-native-gesture-handler
. - Simple.
Every other slider is either based on react-native
's gesture handler OR are several hundred lines of code and seemingly unnecessarily complex to debug. So we built a slider that was less than 200 lines of code and utilized react-native-gesture-handler
.
Installation
npm install @5stones/react-native-slider
Usage
import React from 'react';
import { View } from 'react-native';
import Slider from "@5stones/react-native-slider";
const Screen: React.FC = () => {
return (
<View>
<Slider/>
</View>
);
};
Props
Name | Optional | Type | Description |
---|---|---|---|
value | :whitecheckmark: | number | A numeric value allowing between the minimumValue and maximumValue allowing you to control the position of the slider. |
onValueChange | :whitecheckmark: | (value: number) => void | A callback function allowing you to receive updates of the slider position. |
thumbSize | :whitecheckmark: | number | Specify the size of the thumb (this is important as it's used to calculate positions). |
minimumValue | :whitecheckmark: | number | The minimum bound of the sliders value. |
maximumValue | :whitecheckmark: | number | The maximum bound of the sliders value. |
defaultContainerWidth | :whitecheckmark: | number | A default value for the width of the container (which will get overwritten dynamically after layout). |
touchableContainerStyle | :whitecheckmark: | ViewStyle | A style object allowing you control over the touch target container. |
containerStyle | :whitecheckmark: | ViewStyle | A style object allowing you control over the container. |
thumbStyle | :whitecheckmark: | ViewStyle | A style object allowing you control over the thumb. |
minimumTrackStyle | :whitecheckmark: | ViewStyle | A style object allowing you control over the minimum track. |
maximumTrackStyle | :whitecheckmark: | ViewStyle | A style object allowing you control over the maximum track. |
Release
The standard release command for this project is:
npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease | from-git]
This command will:
- Generate/update the Changelog
- Bump the package version
- Tag & pushing the commit to GitHub & NPM
e.g.
npm version 1.2.17
npm version patch // 1.2.17 -> 1.2.18
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT