防止双重抽头

Question

我有一个TouchableHighlight包装了一个文本块，当点击它时，会打开一个新的场景（我使用的是react native router flux）。
除了快速点击TouchableHighlight之外，一切正常，场景可以渲染两次。
我想防止用户快速点击该按钮。

在本机中实现这一点的最佳方法是什么？我研究了手势应答器系统，但没有任何例子或类似的东西，如果你是新来的，像我一样，会让人困惑。

Answer 1

也许您可以使用0.22中为可触摸元素引入的新禁用功能？我在想这样的事情：

组成部分

<TouchableHighlight ref = {component => this._touchable = component}
                    onPress={() => this.yourMethod()}/>

方法

yourMethod() {
    var touchable = this._touchable;
    touchable.disabled = {true};

    //what you actually want your TouchableHighlight to do
}

我自己都没试过。所以我不确定它是否有效。

Answer 2

以下工作原理是防止路由到同一路由两次：

import { StackNavigator, NavigationActions } from 'react-navigation';

const App = StackNavigator({
    Home: { screen: HomeScreen },
    Details: { screen: DetailsScreen },
});

// Prevents double taps navigating twice
const navigateOnce = (getStateForAction) => (action, state) => {
    const { type, routeName } = action;
    return (
        state &&
        type === NavigationActions.NAVIGATE &&
        routeName === state.routes[state.routes.length - 1].routeName
    ) ? state : getStateForAction(action, state);
};
App.router.getStateForAction = navigateOnce(App.router.getStateForAction);

Answer 3

您要做的是限制分接回调，以便它们只运行一次。

这被称为节流，您可以使用下划线：以下是方法：

_.throttle(
    this.thisWillRunOnce.bind(this),
    200, // no new clicks within 200ms time window
);

下面是我的react组件的外观。

js prettyprint-override">class MyComponent extends React.Component {
  constructor(props) {
    super(props);
     _.throttle(
        this.onPressThrottledCb.bind(this),
        200, // no new clicks within 200ms time window
    );
  }
  onPressThrottledCb() {
    if (this.props.onPress) {
      this.props.onPress(); // this only runs once per 200 milliseconds
    }
  }
  render() {
    return (
      <View>
        <TouchableOpacity onPress={this.onPressThrottledCb}>
        </TouchableOpacity>
      </View>
    )
  }
}

我希望这对你有帮助。如果你想了解更多，请检查此线程。