相对于滑块拇指反应本机的滑块显示值 [英] Display value of slider with respect to slider thumb react native

问题描述

我想相对于滑块移动标签，就像这样:

I want to move the label with respect to slider thumb just like this one:

现在我的滑块是这样的:

Right now my slider is like this:

我想显示相对于滑块拇指30公里的标签，以便随着滑块的移动，标签也应相应地移动.

I want to display the label shown as 30 km with respect to the slider thumb such that as the slider moves, the label should move accordingly.

我正在使用Native React Slider组件.

I am using Native React Slider component.

这是我的代码:

<Slider 
     style={styles.slider} 
     thumbTintColor='rgb(252, 228, 149)' 
     step={1} 
     maximumValue={5} 
     thumbTintColor='rgb(252, 228, 149)' 
     maximumTrackTintColor='#494A48' 
     minimumTrackTintColor='rgb(252, 228, 149)' />

推荐答案

解决问题的方法:

    constructor(props){
        super(props)
        this.state = {
            distance: 30,
            minDistance: 10,
            maxDistance: 100
        }
    }


    render() {
        return (
            <View style={styles.container}>
                <Slider
                    style={{ width: 300}}
                    step={1}
                    minimumValue={this.state.minDistance}
                    maximumValue={this.state.maxDistance}
                    value={this.state.distance}
                    onValueChange={val => this.setState({ distance: val })}
                    thumbTintColor='rgb(252, 228, 149)'
                    maximumTrackTintColor='#d3d3d3' 
                    minimumTrackTintColor='rgb(252, 228, 149)'
                />
                <View style={styles.textCon}>
                    <Text style={styles.colorGrey}>{this.state.minDistance} km</Text>
                    <Text style={styles.colorYellow}>
                        {this.state.distance + 'km'}
                    </Text>
                    <Text style={styles.colorGrey}>{this.state.maxDistance} km</Text>
                </View>
            </View>
        );
    }
}

样式:

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#000',
    },
    textCon: {
        width: 320,
        flexDirection: 'row',
        justifyContent: 'space-between'
    },
    colorGrey: {
        color: '#d3d3d3'
    },
    colorYellow: {
        color: 'rgb(252, 228, 149)'
    }
});

输出:

工作片段: https://snack.expo.io/Syrt3Bs7z

这篇关于相对于滑块拇指反应本机的滑块显示值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！