代码之家 › 专栏 › 技术社区 › msqar

React Native Slider-onValueChange调用次数过多

react-native

msqar · 技术社区 · 6 年前

我正在我的应用程序上创建一个滑块,但每当我开始拖动拇指时,它就会一直闪烁。这是因为我直接使用状态,并在状态发生变化时存储它。我希望该值在我移动时更新,而不仅仅是在我停止时。尝试在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 参数更新状态,但这仅在我从组件释放手指时触发。不是预期的效果。

我应该在这个设置状态上添加一个去盎司还是什么?

1 回复 | 直到 6 年前

VulfCompressor 6 年前

你可以去盎司或节流 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 })
}