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

Posted 2023-03-15

【中文标题】滑块相对于滑块拇指的显示值反应原生

【英文标题】：Display value of slider with respect to slider thumb react native

【发布时间】：2018-01-04 05:47:19

【问题描述】：

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

现在我的滑块是这样的：

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

我正在使用 Native React Slider 组件。

这是我的代码：

<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)' />

【参考方案1】：

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

const left = this.state.value * (screenWidth-60)/100 - 15;

<Text style=  width: 50, textAlign: 'center', left: left  >
  Math.floor( this.state.value )
</Text>

<Slider maximumValue=100 
        value=this.state.value
        onValueChange=value => this.setState( value ) />

【讨论】：

感谢您的回复。如果 minimumValue = 3000 和 maximumValue = 6000 const left = .... 的计算是什么？

【参考方案2】：

解决您的问题：

    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

【讨论】：

效果很好，但我希望标签也可以作为滑块移动器移动。这里标签固定在中心

@AnkushRishi 那你为什么接受这个答案...我正在寻找同一个男孩

【参考方案3】：

内置 <Slider /> 无法灵活地自定义您想要的内容。

这应该可行，react-native-slider，它是官方<Slider /> 的直接替代品。

你需要的和它的演示风格#4非常相似。

对于您的 Slider Label 的值，您可以修改其函数_renderThumbImage() 以替换默认的<Image />。

【参考方案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.现在在滑块的“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>

....... 这将完成这项工作，但您可能需要稍微调整一下。

【参考方案5】：

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

这个link 也可能对你有所帮助。