react-native - React Native slider 存在滞后问题

Question

React Native slider onValueChange 调用 setState 使 slider 滞后。

我也尝试了去抖动功能，但它不能解决我的问题，因为我必须在屏幕上显示更改值。因此，如果不使用 lodash 的 debounce， slider 会滞后，并且当使用 debounce 时， slider 的移动比以前的方法要平滑一些，但是值的变化(我必须在屏幕上显示的状态值)不会立即改变，值的变化反射(reflect)在屏幕上滞后意味着在屏幕上显示需要时间。

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

还有一件事是，当我只实现上面的 slider 时，没有问题，但是当我在有许多状态的完整代码中使用它时，它就会产生问题。

Answer 1

试试这个解决方案，你可以减少更新次数:

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