时间戳

首页 > 解决方案 > 对 debounce 的原生使用做出反应在 android 设备上不起作用

android - 对 debounce 的原生使用做出反应在 android 设备上不起作用

问题描述

下面的包装器组件适用于 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>
  )
}

标签： androidreact-nativelodashdebounce

解决方案

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

所以我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>
        );
    }
}

推荐阅读