javascript - slider 相对于 slider 拇指的显示值 native react

Question

我想像下面这样相对于 slider 拇指移动标签:

现在我的 slider 是这样的:

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

我正在使用 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)' />

Answer 1

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

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