react native 中navigator 避免连续多次点击push到一样的界面

在React native项目开发中，当用户点击按钮navigator执行页面跳转的时候，如果连续按了两下，竟然会push两个相同的页面，造成线程卡顿崩溃的现象。在 Android 我们通过设置launchMode可以轻松的避免出现这样的问题，但在react native中并没有launchMode这类似的属性方法供我们设置。既然执行页面跳转是navigator负责，那我们就从navigator入手。我的思路是这样的，在执行页面跳转的时候，判断路由栈里面是否已经存在当前页面(判断两个页面是否相同我比较的是name，当然你也可以设置比较Id)，如果存在，return不执行跳转页面操作，否则跳转。

从react native 官网中获取到navigator提供的方法有如下几种：

getCurrentRoutes() - 获取当前栈里的路由，也就是push进来，没有pop掉的那些。

jumpBack() - 跳回之前的路由，当然前提是保留现在的，还可以再跳回来，会给你保留原样。

jumpForward() - 上一个方法不是调到之前的路由了么，用这个跳回来就好了。

jumpTo(route) - 跳转到已有的场景并且不卸载。

push(route) - 跳转到新的场景，并且将场景入栈，你可以稍后跳转过去

pop() - 跳转回去并且卸载掉当前场景

replace(route) - 用一个新的路由替换掉当前场景

replaceAtIndex(route, index) - 替换掉指定序列的路由场景

replacePrevious(route) - 替换掉之前的场景

resetTo(route) - 跳转到新的场景，并且重置整个路由栈

immediatelyResetRouteStack(routeStack) - 用新的路由数组来重置路由栈

popToRoute(route) - pop到路由指定的场景，在整个路由栈中，处于指定场景之后的场景将会被卸载。

popToTop() - pop到栈中的第一个场景，卸载掉所有的其他场景。 可以发现getCurrentRoutes()方法能提供给我们当前路由栈所有存在的页面，那这就好办了，首先看下我跳转页面的写法(部分代码片段)：

//配置切换页面的动画

 

_configureScene(route) {

 

return Navigator.SceneConfigs.FadeAndroid;

 

}

 

//切换的页面

 

_renderScene(route, navigator) {

 

this ._navigator = navigator;

 

let Component = route.component;

 

return

 

}

 

render() {

 

let defaultName = '***' ;

 

let defaultComponent = ***;

 

return (

 

 

configureScene={(route) => this ._configureScene(route)}

 

renderScene={(route, navigator) => this ._renderScene(route, navigator)}/>

 

);

 

}

路由(route)是navigator用来识别渲染场景的一个对象，我们可以给他设置相关属性，我设置了两个属性name,component，跳转页面的名字，跳转目标的页面，然后在跳转的时候判断页面是否相同，我单独写了个跳转的方法如下，只需要将跳转的信息传入进来即可实现页面跳转：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

//统一的跳转方法   static pushPage(navigator, name, component, params) {   const routes = navigator.getCurrentRoutes();   for (let i = 0 ; i < routes.length; i++) {   if (name === routes[i].name) {   return ;   }   }   InteractionManager.runAfterInteractions(() => {   navigator.push({   name: name,   component: component,   params: params   });   });   }

这样无论用户快速点击多少次，navigator都只会push一个页面进入路由栈，完美解决了自己的问题。