@5stones/react-native-slider 中文文档教程

发布于 3年前 浏览 27 项目主页 更新于 3年前

@5stones/react-native-slider

Commitizen friendly

一个真正简单的 react-native 滑块。

Motivation

我们需要一个滑块:

  1. Based on react-native-gesture-handler.
  2. 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

NameOptionalTypeDescription
value:whitecheckmark:numberA numeric value allowing between the minimumValue and maximumValue allowing you to control the position of the slider.
onValueChange:whitecheckmark:(value: number) => voidA callback function allowing you to receive updates of the slider position.
thumbSize:whitecheckmark:numberSpecify the size of the thumb (this is important as it's used to calculate positions).
minimumValue:whitecheckmark:numberThe minimum bound of the sliders value.
maximumValue:whitecheckmark:numberThe maximum bound of the sliders value.
defaultContainerWidth:whitecheckmark:numberA default value for the width of the container (which will get overwritten dynamically after layout).
touchableContainerStyle:whitecheckmark:ViewStyleA style object allowing you control over the touch target container.
containerStyle:whitecheckmark:ViewStyleA style object allowing you control over the container.
thumbStyle:whitecheckmark:ViewStyleA style object allowing you control over the thumb.
minimumTrackStyle:whitecheckmark:ViewStyleA style object allowing you control over the minimum track.
maximumTrackStyle:whitecheckmark:ViewStyleA style object allowing you control over the maximum track.

Release

此项目的标准发布命令是:

npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease | from-git]

此命令将:

  1. Generate/update the Changelog
  2. Bump the package version
  3. 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

Commitizen friendly

A truly simple react-native slider.

Motivation

We needed a slider that was:

  1. Based on react-native-gesture-handler.
  2. 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

NameOptionalTypeDescription
value:whitecheckmark:numberA numeric value allowing between the minimumValue and maximumValue allowing you to control the position of the slider.
onValueChange:whitecheckmark:(value: number) => voidA callback function allowing you to receive updates of the slider position.
thumbSize:whitecheckmark:numberSpecify the size of the thumb (this is important as it's used to calculate positions).
minimumValue:whitecheckmark:numberThe minimum bound of the sliders value.
maximumValue:whitecheckmark:numberThe maximum bound of the sliders value.
defaultContainerWidth:whitecheckmark:numberA default value for the width of the container (which will get overwritten dynamically after layout).
touchableContainerStyle:whitecheckmark:ViewStyleA style object allowing you control over the touch target container.
containerStyle:whitecheckmark:ViewStyleA style object allowing you control over the container.
thumbStyle:whitecheckmark:ViewStyleA style object allowing you control over the thumb.
minimumTrackStyle:whitecheckmark:ViewStyleA style object allowing you control over the minimum track.
maximumTrackStyle:whitecheckmark:ViewStyleA 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:

  1. Generate/update the Changelog
  2. Bump the package version
  3. 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

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文