@adalo/react-native-multi-slider 中文文档教程

Question

react-native-multi-slider

纯 JS 反应本机滑块组件与一个或两个标记。 用于自定义轨道、触摸区域并为触摸事件和值更改提供客户标记和回调的选项。

Examples

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

Getting Started

• Installation

Installation

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

Usage in a ScrollView

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

 render() {
   return (
     <ScrollView scrollEnabled={this.state.scrollEnabled}>
      <MultiSlider
        ...
        onValuesChangeStart={this.disableScroll}
        onValuesChangeFinish={this.enableScroll}
      />
    </ScrollView>
    );

shape up CustomMarker as left and right

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

<MultiSlider
    ...
    isMarkersSeparated={true}

    customMarkerLeft={(e) => {
         return (<CustomSliderMarkerLeft
          currentValue={e.currentValue}/>)
    }}

    customMarkerRight={(e) => {
         return (<CustomSliderMarkerRight
         currentValue={e.currentValue}/>)
    }}
/>

Partial report of the props

随时为文档的这一部分做出贡献。

Prop name	Default value	Type	Purpouse
values	[0]	array of numbers	Prefixed values of the slider.
onValuesChangeStart	() => {}	function	Callback when the value starts changing
onValuesChange	() => {}	function	Callback when the value changes
onValuesChangeFinish	(values) => {}	function	Callback when the value stops changing
sliderLength	280	number	Length of the slider (?)
touchDimensions	{height: 50,width: 50,borderRadius: 15,slipDisplacement: 200}	object	(?)
enableLabel		function	Enable the label rendering
customLabel		function	Component used for rendering a label above the cursors.
customMarker		function	Component used for the cursor.
customMarkerLeft		function	Component used for the left cursor.
customMarkerRight		function	Component used for the right cursor.
isMarkersSeparated		boolean	See explaination above in the README.md
min	0	number	Minimum value available in the slider.
max	10	number	Maximum value available in the slider.
step	1	number	Step value of the slider.
optionsArray		array of numbers	Possible values of the slider. Ignores min and max.
{container/track/selected/unselected/ markerContainer/marker/pressedMarker} Style		style object	Styles for the slider
valuePrefix		string	Prefix added to the value.
valueSuffix		string	Suffix added to the value.
enabledOne	true	boolean	Enables the first cursor
enabledTwo	true	boolean	Enables the second cursor
onToggleOne	undefined	function callback	Listener when first cursor toggles.
onToggleTwo	undefined	function callback	Listener when second cursor toggles.
allowOverlap	false	boolean	Allow the overlap within the cursors.
snapped	false	boolean	Use this when you want a fixed position for your markers, this will split the slider in N specific positions
vertical	false	boolean	Use vertical orientation instead of horizontal.
markerOffsetX	0	number	Offset the cursor(s) on the X axis
markerOffsetY	0	number	Offset the cursor(s) on the Y axis
minMarkerOverlapDistance	0	number	if this is > 0 and allowOverlap is false, this value will determine the closest two markers can come to each other. This can be used for cases where you have two markers large cursors and you don't want them to overlap. Note that markers will still overlap at the start if starting values are too near.
imageBackgroundSource	undefined	string	Specifies the source as required by ImageBackground