react-native 解决多次跳转的问题
在react-native@0.44版本之后，用react-navigation替代之前的导航Navigator
在react-natvigation的使用过程中发现了一个问题：
在触发页面跳转的元素上重复、快速点击时，即将被加载的页面会多次被加载，android尤为明显。
经过观察发现，在onPress事件执行后会触发navigation.navigate(...)方法，使得跳转到其他页面，而当页面加载缓慢时，多余的点击会多次触发该事件，导致页面重复加载
解决思路：
一种是修改源码，一种是onPress事件处控制，第一次点击后，加上延时，禁止之后的点击操作，但是需要每个点击事件都添加
比如
在constructor中初始化一个记录是否等待的state
constructor(props) {
super(props)
this.state = {
waiting: false,//防止多次重复点击
}
}
利用this.state.waiting控制TouchableOpacity的disabled属性
<TouchableOpacity
disabled={this.state.waiting}
onPress={() => this.repeatClick(this.props.navigation)}
>
<Text style={{padding: 10, color: 'red'}}>goto detail page</Text>
</TouchableOpacity>
...
repeatClick(navigation){
this.setState({waiting: true});
/*-------这中间写你需要实现的逻辑------------*/
navigation.navigate('Detail')
/*-------这中间写你需要实现的逻辑------------*/
setTimeout(()=> {
this.setState({waiting: false})
}, 3000);//设置的时间间隔根据实际需要
}
修改源码的方法为：
进阶版
修改源码
位于：../node_modules/react-navigation/src/addNavigationHelper.js
此次修改基于"react-navigation": "^1.0.0-beta.27"，
修改后的代码如下：
......
......
export default function<S: {}>(
navigation: NavigationProp<S>
): NavigationScreenProp<S> {
/* ------------此处为添加的代码--------- */
let debounce = true;// 定义判断变量
/* ------------此处为添加的代码--------- */
return {
...navigation,
goBack: (key?: ?string): boolean => {
let actualizedKey: ?string = key;
if (key === undefined && navigation.state.key) {
invariant(
typeof navigation.state.key === 'string',
'key should be a string'
);
actualizedKey = navigation.state.key;
}
return navigation.dispatch(
NavigationActions.back({ key: actualizedKey })
);
},
navigate: (
routeName: string,
params?: NavigationParams,
action?: NavigationNavigateAction
/* ------------此处为修改后的的代码--------- */
): boolean =>{
if (debounce) {
debounce = false;
navigation.dispatch(
NavigationActions.navigate({
routeName,
params,
action,
}),
);
setTimeout(
() => {
debounce = true;
},
5000,
);
return true;
}
return false;
},
/* ------------此处为修改后的的代码--------- */
......
......
其中5000间隔5秒过长，建议改为300-500
