react-native-multi-slider

> 编程语言

开源

Android 和 iOS 纯 JS React Native 多滑块

793 stars0 点赞2 次浏览

访问官网 GitHub

工具介绍

Android 和 iOS 纯 JS React Native 多滑块

React-native-multi-slider

纯 JS React Native 滑块组件,具有一个或两个标记。可自定义轨道、触摸区域,并为触摸事件和值变化提供客户标记和回调。

示例

bash

cd example/Basic
npm install
react-native run-ios
react-native run-android

开始使用

安装

安装

bash

$ npm install --save @ptomasroos/react-native-multi-slider

在 ScrollView 中的使用

javascript

import MultiSlider from '@ptomasroos/react-native-multi-slider';

...

 enableScroll = () => this.setState({ scrollEnabled: true });
 disableScroll = () => this.setState({ scrollEnabled: false });

 render() {
   return (
     
      
    
    );

将 CustomMarker 设置为左侧和右侧

为了在标记上设置不同的样式,您可以将 isMarkersSeparated 设置为 true,在 MultiSlider 中定义 customMarkerLeft 和 customMarkerRight。例如:

javascript

 {
         return ()
    }}

    customMarkerRight={(e) => {
         return ()
    }}
/>

属性的部分报告

欢迎您对文档的这一部分做出贡献。

属性名称	默认值	类型	用途
values	[0]	数字数组	设置滑块的初始值。
onValuesChangeStart	() => {}	函数	当值开始变化时的回调函数。
onValuesChange	() => {}	函数	当值变化时的回调函数。
onValuesChangeFinish	(values) => {}	函数	当值停止变化时的回调函数。
sliderLength	280	数字	滑块的长度（？）
touchDimensions	{height: 50,width: 50,borderRadius: 15,slipDisplacement: 200}	对象	（？）
enableLabel		函数	启用标签渲染。
customLabel		函数	用于在游标上方渲染标签的组件。
customMarker		函数	用于渲染 Cursor 的组件。
customMarkerLeft		函数	用于渲染左侧 Cursor 的组件。
customMarkerRight		函数	用于渲染右侧 Cursor 的组件。