美文网首页
navigation的重复跳转问题

navigation的重复跳转问题

作者: 码代码的小公举 | 来源:发表于2018-05-31 11:37 被阅读65次
这里我针对navigate()方法的重复点击跳转进行修改源码,

这里提一下修改源码的坏处:你每次换一个环境都需要复制你的修改过的包,但是一个native项目需要配置的坏境经常会很多,其实也不差这一两个,但是自己如果忘了有这个改动就尴尬了。

我的版本 : "react-navigation": "^1.5.9"
改动文件:node_modules/react-navigation/src/addNavigationHelpers.js
改动:(有中文备注的地方就是我改动的地方)

/* Helpers for navigation */

import NavigationActions from './NavigationActions';
import invariant from './utils/invariant';

let loading = false  //防止重复跳转
export default function(navigation) {
 return {
   ...navigation,
   goBack: key => {
     let actualizedKey = 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: (navigateTo, params, action) => {
     console.log(loading)
     if(loading) {
       return
     }
     //进入loading
     loading = true  
     //0.8秒loading时间
     setTimeout(()=>{
       //恢复跳转
       loading = false
     }, 800)
     if (typeof navigateTo === 'string') {
       return navigation.dispatch(
         NavigationActions.navigate({ routeName: navigateTo, params, action })
       );
     }
     invariant(
       typeof navigateTo === 'object',
       'Must navigateTo an object or a string'
     );
     invariant(
       params == null,
       'Params must not be provided to .navigate() when specifying an object'
     );
     invariant(
       action == null,
       'Child action must not be provided to .navigate() when specifying an object'
     );
     return navigation.dispatch(NavigationActions.navigate(navigateTo));
   },
   pop: (n, params) =>
     navigation.dispatch(
       NavigationActions.pop({ n, immediate: params && params.immediate })
     ),
   popToTop: params =>
     navigation.dispatch(
       NavigationActions.popToTop({ immediate: params && params.immediate })
     ),
   /**
    * For updating current route params. For example the nav bar title and
    * buttons are based on the route params.
    * This means `setParams` can be used to update nav bar for example.
    */
   setParams: params => {
     invariant(
       navigation.state.key && typeof navigation.state.key === 'string',
       'setParams cannot be called by root navigator'
     );
     const key = navigation.state.key;
     return navigation.dispatch(NavigationActions.setParams({ params, key }));
   },

   getParam: (paramName, defaultValue) => {
     const params = navigation.state.params;

     if (params && paramName in params) {
       return params[paramName];
     }

     return defaultValue;
   },

   push: (routeName, params, action) =>
     navigation.dispatch(
       NavigationActions.push({ routeName, params, action })
     ),

   replace: (routeName, params, action) =>
     navigation.dispatch(
       NavigationActions.replace({
         routeName,
         params,
         action,
         key: navigation.state.key,
       })
     ),
 };
}


相关文章

网友评论

      本文标题:navigation的重复跳转问题

      本文链接:https://www.haomeiwen.com/subject/gncqsftx.html