React Native防止重复点击

众所周知，目前RN的反应速度距离原生还是差一点点，再加上本人单身25年的手速那更是比平常人快了不是一点半点，所以经常导致点击多下没反应（暂时没反应），之后打开n多相同的界面（具体多少那就要看你手速了）。本篇就是为了解决这一问题而存在的，闲话少说，见正文：

情景一：

直接点击跳转到下一个页面：
在constructor中初始化state，设置isDisable初始值为false。

    constructor(props) {
        super(props);
        this.state = {
            isDisable: false,
        };
    }

在需要防止点击的地方加入，有的控件可能没有点击事件，在这里需要用下面这三个简单封装一下。因为TouchableHighlight，TouchableNativeFeedback，TouchableOpacity这三个都继承TouchableWithoutFeedback所有的属性，所以在这里用disabled这个属性来控制是否可点击。

Paste_Image.png

<TouchableHighlight
    disabled={this.state.isDisable}
    onPress={() => {
                        this.setState({isDisable: true});
                    }}
 </TouchableHighlight>

情景二：

跳转到下一个页面，还会返回的：
直接在上述onPress方法中，添加一个定时器

   this.timer = setTimeout(
                            () => {
                                this.setState({isDisable: false});
                            },
                            1000
                        );

为了防止发生致命错误（闪退）是与计时器有关，具体来说，是在某个组件被卸载（unmount）之后，计时器却仍然在运行。需要在unmount组件时清除（clearTimeout/clearInterval）所有用到的定时器，代码如下：

 componentWillUnmount() {
        // 请注意Un"m"ount的m是小写

        // 如果存在this.timer，则使用clearTimeout清空。
        // 如果你使用多个timer，那么用多个变量，或者用个数组来保存引用，然后逐个clear
        this.timer && clearTimeout(this.timer);
    }