《ReactNative》之 react-navigation 重复跳转问题解决

在使用 react-navigation 跳转界面时，如果快速点击某个按钮跳转界面，会出现 界面连续跳转 2 次的情况。

这里提供一种简单的解决方法：

新建 common.js 文件，在其中编写一个公共的导航跳转的函数，控制让界面在 一定时间范围（这里是1秒）内只跳转一次，比如在1秒内点击多次时，跳转事件只执行一次。

common.js代码

var lastNavTime = "";
export const jumpPage=(navigation,page,params)=>{
   //上次点击与本次点击时间差在 1000 毫秒之内，就返回
  if(lastNavTime+1000 >= Date.now()){
    return;
  }
  lastNavTime = Date.now();
  if(navigation){
    navigation.push(page,params);
  }
}

使用

1.首先在头部导入 jumpPage 函数

import {jumpPage} from '../common';

2.在需要跳转的地方使用 jumpPage 公共函数做跳转

_pressBtn(){
    jumpPage(this.props.navigation,'home',{userId:'abc'});
 }