探索React Native的多滑块组件：react-native-multi-slider

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import MultiSlider from '@woosmap/react-native-multi-slider';
 
export default class MultiSliderExample extends Component {
  constructor(props) {
    super(props);
    this.state = { values: [2, 4] };
  }
 
  render() {
    return (
      <View style={styles.container}>
        <MultiSlider
          values={this.state.values}
          onValuesChange={(values) => this.setState({ values })}
          selectedStyle={styles.selectedStyle}
          sliderLength={200}
          min={0}
          max={10}
          step={1}
        />
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 50,
    paddingHorizontal: 20,
  },
  selectedStyle: {
    backgroundColor: 'blue',
  },
});

这段代码展示了如何在React Native应用中使用@woosmap/react-native-multi-slider组件来创建一个多滑块控件。通过values属性来跟踪滑块的位置，并且可以通过onValuesChange回调函数来监听滑块位置的变化。selectedStyle属性用于定制被选中滑块的样式。sliderLength属性定义了滑块的总长度，min和max属性设置了滑块的最小值和最大值，step属性设置了每次滑动的步长。