React Native滑块存在滞后问题

tuwxkamq  于 2022-11-17  发布在  React
关注(0)|答案(4)|浏览(102)

在ValueChange调用setState时React Native滑块会使滑块滞后。
我也尝试了去抖动功能,但它不能解决我的问题,因为我必须显示屏幕上的变化值。因此,如果不使用去抖动从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>
    );
  }
}

还有一件事是,当我只实现上面的滑块,然后没有问题,但当我用它在完整的代码有很多状态,然后它创造的问题。

wgeznvg7

wgeznvg71#

试试这个解决方案,你减少了更新的次数:

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

n8ghc7c12#

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

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

gt0wga4j3#

<Slider
    value={0} //don't set value to this.state.value
    onValueChange={value => this.setState({ value }) }
    maximumValue={100}
    step={1}
/>

值属性应该是无状态的。在触发onChangeValue属性时为值属性分配状态时,该值将设置为上一个状态,这使其在触发onChangeValue时滞后一点。值属性应仅提供静态数字以供初始引用。

lymgl2op

lymgl2op4#

只需替换onSlidingComplete中的onValueChange

相关问题