Question

此处的工作示例：https://snack.expo.io/H1TNJPn8Q

问题是在拖动时滑块的报告值，并且滑块的实际值在视觉上不正确。您可以在上面的示例中看到这一点

这是测试组件的代码：

class App extends React.Component {
  constructor(props){
    super(props)
    this.state={
      currentValue: 0,
      sliderValue: 0
    }
  }
  render() {
    return (
      <View style={styles.container}>
        <Slider 
          style={styles.slider}
          minimumValue={0}
          value={ this.state.sliderValue }
          maximumValue={2589127}
          step={0.001}
          onValueChange={e => {
            this.setState(() => {
              return { currentValue: e }
            })
          }}
          onSlidingComplete={e => {
            this.setState(() => {
              return { sliderValue: e }
            })
          }}
        />
        <Text>{this.state.currentValue}</Text>
        <Text>{this.state.sliderValue}</Text>
      </View>
    );
  }
}

在拖动滑块的同时，我更新currentValue的值。完成后，我将sliderValue设置为该函数的报告值。如您所见，每次完成滑动时值都是相同的，但是只要设置了滑块的值，拇指按钮的位置就会跳回。滑块值越高，它跳回的距离似乎越远，这使我认为滑块比例由于某种原因可能不是线性的。

有人知道为什么会这样吗？有没有一种方法可以使用原始组件准确地跟踪滑块值（并以可视方式反映出来）？

Answer 1

这一步骤很容易修复，我要做的就是将步骤从0.001更改为1。

    <Slider 
      style={styles.slider}
      minimumValue={0}
      value={ this.state.sliderValue }
      maximumValue={2589127}
      step={1} // setting this below 1 seems to cause the problem
      onValueChange={e => {
        this.setState(() => {
          return { currentValue: e }
        })
      }}
      onSlidingComplete={e => {
        this.setState(() => {
          return { sliderValue: e }
        })
      }}
    />

React Native Slider组件无法按预期工作

1 个答案: