如何创建范围滑块？(反应天然)

Question

这是我的范围滑块

但是对于更改值,用户需要单击此值.如何制作,能够拉动滑块？谢谢.

Answer 1

如果我是你,毫无疑问,我会寻找一个图书馆为我做繁重的工作.

假设您需要跨平台(iOS和Android)范围滑块解决方案,根据我在编写本答案时的研究,在两个平台和可定制选项上的性能方面都能获得最佳结果的插件是@ ptomasroos/react-原生多滑块.

它缺乏良好的文档,但有可用的例子.这是基本设置:

import React from 'react';
import { View, Text } from 'react-native';
import MultiSlider from '@ptomasroos/react-native-multi-slider';

class RangeSlider extends React.Component {
    state = {
        values: [3, 7],
    };

    multiSliderValuesChange = (values) => {
        this.setState({
            values,
        });
    }

    render() {
        return (
            <View>
                <MultiSlider
                    values={[this.state.values[0], this.state.values[1]]}
                    sliderLength={280}
                    onValuesChange={this.multiSliderValuesChange}
                    min={0}
                    max={10}
                    step={1}
                />
                <Text style={styles.text}>Two Markers:</Text>
                <Text style={styles.text}>{this.state.values[0]}</Text>
                <Text style={styles.text}>{this.state.values[1]}</Text>
            </View>
        )
    }
}

Answer 2

您将需要使用 PanResponder。查看 PanResponder 的 UIExplorer 演示。 http://www.reactnative.com/uiexplorer/