Question

我正在我的应用程序上创建一个Slider，但是每当我开始拖动拇指时，它就会一直闪烁。这是因为我直接使用状态并在状态更改时将其存储。我希望该值在移动时不仅在停止时也能更新。尝试通过forceUpdate（）在状态之外使用公共变量，但是它发生的是同一件事，因此多次更新的延迟很大。

这是我用来创建滑块的代码

export default class Profile extends Component {

constructor(props) {
   super(props)
   this.state = { age: 18 }
  } 

  render() {    

    return (
      <View style={styles.container}>
        <Slider
         style={{ width: 300 }}
         step={1}
         minimumValue={18}
         maximumValue={71}
         value={this.state.age}
         onValueChange={val => this.setState({ age: val })}
        />
        <Text style={styles.welcome}>
          {this.state.age}
        </Text>            
      </View>
    );
  }
}

为了停止闪烁，我使用了onSlidingComplete参数来更新状态，但是仅当我从组件上松开手指时才会触发。效果不理想。

我应该在此setState上添加去抖吗？

Answer 1

您可以对setState呼叫进行反跳或抑制。使用Lodash：

....
onValueChange={_.debounce(this.setAge, 33)} // 30 updates per second
onValueChange={_.debounce(this.setAge, 16)} // 60 updates per second (too much!)
....

setAge(age) {
    // Don't forget to bind this function to your component on the Constructor function!
    this.setState({ age })
}

Answer 2

您可以通过注释value的{{1}}道具来停止滞后。该道具仅用于初始滑块值，但它会造成滞后...

我假设您要在某个地方的<Slider />组件中显示滑块值，因此可以通过为您拥有的实际逻辑状态创建2个状态来实现。这两个中的一个将在文本组件中显示数据，而另一个将更新滑块。

我写了一个详细的答案（有代码）here。

React Native Slider-onValueChange被调用太多次

2 个答案: