реагировать нативное использование debounce не работает на устройстве Android - PullRequest
Новая
       34

реагировать нативное использование debounce не работает на устройстве Android

0 голосов
/ 12 октября 2018

Компонент-обёртка ниже работает нормально для IOS, но на самом деле не запускается при запуске на Android.то есть, если я выбью непрозрачность, она генерирует множество звонков

какие-либо подсказки?

Я не смог найти ничего, что говорит, что оно не должно работать на Android 

constructor(props) {
  super(props)

  this.onPressDebounced = _.debounce((...params) => this.onPressed(...params), 500, {
    'leading': true,
    'trailing': false
  })
}

onPressed(...params) {
  if (this.props.onPress) {
    this.props.onPress(...params)
  }
}

render() {
  return ( <TouchableHighlight { ...this.props } onPress = { this.onPressDebounced }> {this.props.children} </TouchableHighlight>
  )
}

Ответы [ 3 ]

0 голосов
/ 04 января 2019

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

Поэтому я проверяю переменную this.lockSubmit перед выполнением основных сервисных кодов.Выйдите из функции, если это ложное значение, потому что это означает, что есть еще один незаконченный сенсорный вызов.

Следующий оператор установлен this.lockSubmit на true.

И тогда я могу выполнить асинхронную операцию или операцию навигации после this.lockSubmit = true

После того, как сервисные коды былиОбратный звонок или закончен.Я установил this.lockSubmit на false.это утверждение означает, что сенсорный вызов завершен.Но иногда сервисные коды быстро заканчиваются, поэтому я добавляю setTimeout, чтобы пересчитать эту задержку переменной блокировки. 

class PageA extends React.Component {
    // also work well with async function
    onSubmit() {
        if(this.lockSubmit) return;
        this.lockSubmit = true;

        // validate form
        if(this.form.validate()) {
            // jump to another page
            this.props.navigation.push('Uploading');
        }

        this.setTimeout(() => this.lockSubmit = false, 500);
    }

    render() {
        return (
            <TouchableOpacity onPress={this.onSubmit.bind(this)}>
                <Text>Submit</Text>
            </TouchableOpacity>
        );
    }
}
0 голосов
/ 17 апреля 2019

Я столкнулся с этой проблемой и с android и не мог найти способ обойти ее, используя lodash debouncing или throttling.

Мое текущее решение, которое до сих пор работает нормально, это инкапсуляция этот ответ .Это HOC, который вы можете обернуть вокруг любого компонента с помощью onPress. 

import React from 'react';

const withPreventDoublePress = WrappedComponent => {
  const DISABLED_TIME = 1000;

  class PreventDoublePress extends React.PureComponent {
    originalOnPress = () => {
      this.props.onPress && this.props.onPress();
    };

    onPress = () => {
      if (this.onPressDisabled) return;
      this.onPressDisabled = true;

      this.originalOnPress();

      setTimeout(() => {
        this.onPressDisabled = false;
      }, DISABLED_TIME);
    };

    render() {
      return <WrappedComponent {...this.props} onPress={this.onPress} />;
    }
  }

  PreventDoublePress.displayName = `withPreventDoublePress(${WrappedComponent.displayName ||
    WrappedComponent.name})`;
  return PreventDoublePress;
};

export default withPreventDoublePress;
0 голосов
/ 12 октября 2018

Пожалуйста, попробуйте таким образом, он должен работать 

onPressDebounced = debounce(
  () =>
   this.onPressed(),
  500,
);

render() { 
  return ( 
    <TouchableHighlight 
      { ...this.props } 
      onPress = { this.onPressDebounced}> 
      {this.props.children} 
    </TouchableHighlight>
  )
}
...