如何創建范圍滑塊？ （反應天然）

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

react-native-range-slider的創建者就在這里！

你可以使用這個本機實現的模塊，然后移植到本地反應，從而獲得出色的性能和流暢的動畫效果。

這是一個例子：

import RangeSlider from 'react-native-range-slider'

<View style={{flex: 1, flexDirection: 'row'}}>
  <RangeSlider
    minValue={0}
    maxValue={100}
    tintColor={'#da0f22'}
    handleBorderWidth={1}
    handleBorderColor="#454d55"
    selectedMinimum={20}
    selectedMaximum={40}
    style={{ flex: 1, height: 70, padding: 10, backgroundColor: '#ddd' }}
    onChange={ (data)=>{ console.log(data);} }
  />
</View>

這里唯一的限制和缺點是它僅適用於iOS （當前）。

Answer 3

你會想要使用PanResponder。 查看PanResponder的UIExplorer演示。 http://www.reactnative.com/uiexplorer/