Question

React Native滑块onValueChange调用setState会使滑块滞后。

我也尝试了防抖动功能，但是由于必须在屏幕上显示更改值，因此无法解决我的问题。因此，如果不使用lodash的去抖动，则滑块会滞后，并且当使用去抖动时，滑块的运动比以前的方法要平滑一些，但是值的变化（我必须在屏幕上显示的状态值）不会立即发生变化，而值的变化会反映在屏幕上太慢意味着需要一些时间才能在屏幕上显示。

import React from "react";
import Slider from "react-native-slider";
import { StyleSheet, View, Text } from "react-native";

export default class SliderExample extends React.Component {

  state = {
    value: 0.2
  };

  render() {
    return (
      <View style={styles.container}>
        <Slider
          value={this.state.value}
          onValueChange={value => {
              this.setState({ value })
                // this.props.changeState(this.state.value)
                console.log(this.state.value)
            }}
          maximumValue={100}
          step={1}
        />
        <Text>
          Value: {this.state.value}
        </Text>
      </View>
    );
  }
}

还有一件事是，当我仅实现上面的滑块时，就没有问题，但是当我在有很多状态的完整代码中使用它时，就会造成问题。

Answer 1

尝试此解决方案，可以减少更新数量：

onValueChange={value => {
  clearTimeout(this.sliderTimeoutId)
  this.sliderTimeoutId = setTimeout(() => {
    this.setState({value})
  }, 100)
}}

Answer 2

我通过在值和预览值之间创建不同的状态来解决这个问题，如下所示：

const [value, setValue] = useState(0.2)
const [previewValue, setPreviewValue] = useState(0.2)

render() {
  return (
    <View>
      <Slider
        value={value}
        onValueChange={value => setPreviewValue(value)}
        onSlidingComplete={value => setValue(value)}
      />
      <Text>
        Value: {previewValue}
      </Text>
    </View>
  );
}

Answer 3

值prop的状态应更少。当我们触发onChangeValue属性时，在为value属性分配状态时，该值设置为先前状态，这使它在触发onChangeValue时滞后一点。仅应为Value prop提供一个静态数字作为初始参考。

React Native滑块存在滞后问题

3 个答案: