У слайдера React Native возникла проблема с запаздыванием - PullRequest
Новая
       19

У слайдера React Native возникла проблема с запаздыванием

1 голос
/ 21 июня 2019

Реагирует на собственный ползунок onValueChange, вызывая setState, что делает задержку ползунка.

Я также попробовал функцию debounce, но она не решила мою проблему, так как я должен показать значение изменения на экране. следовательно, без использования debounce from lodash, ползунок запаздывает, и при использовании debounce ползунок немного плавнее, чем предыдущий метод, но изменение в значении (значение состояния, которое я должен показать на экране) не изменяется мгновенно, изменение значения отражается на экране. laggy означает, что для отображения на экране требуется время. 

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

Также одна вещь состоит в том, что, когда я только реализую этот ползунок выше, тогда нет проблем, но когда я использую его в полном коде, где есть много состояний, то это создает проблему.

1 Ответ

1 голос
/ 29 июня 2019

Попробуйте это решение, вы уменьшите количество обновлений: 

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