眾所周知秀鞭,目前RN的反應速度距離原生還是差一點點痴脾,再加上本人單身25年的手速那更是比平常人快了不是一點半點,所以經常導致點擊多下沒反應(暫時沒反應)掸犬,之后打開n多相同的界面(具體多少那就要看你手速了)珊楼。本篇就是為了解決這一問題而存在的通殃,閑話少說,見正文:
情景一:
直接點擊跳轉到下一個頁面:
在constructor中初始化state厕宗,設置isDisable初始值為false画舌。
constructor(props) {
super(props);
this.state = {
isDisable: false,
};
}
在需要防止點擊的地方加入,有的控件可能沒有點擊事件已慢,在這里需要用下面這三個簡單封裝一下曲聂。因為TouchableHighlight,TouchableNativeFeedback佑惠,TouchableOpacity這三個都繼承TouchableWithoutFeedback所有的屬性朋腋,所以在這里用disabled這個屬性來控制是否可點擊齐疙。
<TouchableHighlight
disabled={this.state.isDisable}
onPress={() => {
this.setState({isDisable: true});
}}
</TouchableHighlight>
情景二:
跳轉到下一個頁面,還會返回的:
直接在上述onPress方法中旭咽,添加一個定時器
this.timer = setTimeout(
() => {
this.setState({isDisable: false});
},
1000
);
為了防止發(fā)生致命錯誤(閃退)是與計時器有關剂碴,具體來說,是在某個組件被卸載(unmount)之后轻专,計時器卻仍然在運行。需要在unmount組件時清除(clearTimeout/clearInterval)所有用到的定時器察蹲,代碼如下:
componentWillUnmount() {
// 請注意Un"m"ount的m是小寫
// 如果存在this.timer请垛,則使用clearTimeout清空。
// 如果你使用多個timer洽议,那么用多個變量宗收,或者用個數組來保存引用,然后逐個clear
this.timer && clearTimeout(this.timer);
}