Question

下面的包装器组件可在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>
  )
}

Answer 1

我今天遇到了这个问题。而且我找到了一种避免触摸弹跳的简单解决方案。

因此，在执行核心服务代码之前，我检查了变量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>
        );
    }
}

Answer 2

请尝试以这种方式工作

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

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

Answer 3

我也遇到了android的这个问题，并且无法使用lodash的反跳或节流来解决它。

我目前的解决方案（到目前为止效果很好）是对this answer的封装。您可以使用onPress道具将HOC包裹在任何组件上。

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;

反应防抖的本机使用在Android设备上不起作用

3 个答案: