Question

我想像滑块拇指一样移动标签：

现在我的滑块是这样的：

我想显示相对于滑块拇指显示为30公里的标签，这样当滑块移动时，标签应相应移动。

我正在使用Native React Slider组件。

这是我的代码：

$('body').on('click', '#sample-id', function(){...//handle event here...});

Answer 1

解决您的问题：

    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

Answer 2

您可以将文本的左侧调整为滑块的值。

<Text style={{
                width: 50,
                textAlign: 'center',
                left: this.state.value*(screenWidth-60)/100 - 15,
                }}
            >{Math.floor( this.state.value )}</Text>
            <Slider
                maximumValue={100}
                value={this.state.value}
                onValueChange={value => this.setState({ value })}
            />

Answer 3

内置<Slider />并不能提供定制所需内容的灵活性。

这应该有效react-native-slider，这是官方<Slider />的替代品。

您需要的是与它的演示风格＃4非常相似。

对于有价值的滑块标签，您可以修改其功能_renderThumbImage()以替换默认的<Image />。

Answer 4

测量滑块视图的大小和位置

<Slider
    maximumValue={10}
    onLayout={(event)=>{this.slider_bound(event)}}/>


//majore size of Slider.
slider_bound=(event)=>{
var {x, y, width, height} = event.nativeEvent.layout;
this.state.slider_Width=width;
this.state.slider_Height=height;
this.state.slider_x = x;
this.state.slider_y = y;
this.state.slider_x_step_size = width/10; //Devide the width by slider maximum value

this.setState({triger:''});
console.log(TAG+"Slider Dimen:"+width,height+'pos:',x,y);

}

2.Now现在在滑块的“ onValueChange”回调中。

   //compute position to show slider value txt
   this.state.value_x = (value * this.state.slider_x_step_size) + this.state.slider_x;
   this.state.value_y = this.state.slider_Height + this.state.slider_y;

在计算出的位置上显示滑块“值txt”。

<Text style={{position:'absolute',top:this.state.value_y,left:this.state.value_x,color:colors.blackc}}>{this.state.data.slider_value}</Text>

......... 可以完成这项工作，但您可能需要对其进行一些调整。

Answer 5

我认为react-native-multi-slider将解决您的问题。您可以通过将自定义设计的组件发送到可用的customMarker道具来更改滑块。然后，您可以将Multislider包裹在另一个组件中，保持在那里的状态（用于滑块位置值），并在每次拇指位置发生变化时将其作为道具发送给您的自定义设计标记使用onValuesChange道具。

此link可能也会为您提供帮助。

滑块相对于滑块拇指的显示值反应原生

5 个答案: