快速点击按钮时避免导航两次

我正在使用react-navigation，并且想要在用户点击/快速点击按钮时避免两次导航到同一屏幕。这里是我的减速器：快速点击按钮时避免导航两次

export const navReducer = (state = initialState, action = {}) => { 
    let nextState; 
    switch (action.type) { 
     case TO_LOGIN: 
      nextState = RootNav.router.getStateForAction(
       NavigationActions.reset({ 
        index: 0, 
        actions: [NavigationActions.navigate({ 
         type: NavigationActions.NAVIGATE, 
         routeName: TO_LOGIN 
        })], 
        key: null 
       }), state); 
      break; 

     case TO_HOME: 
      nextState = RootNav.router.getStateForAction(
       NavigationActions.reset({ 
        index: 0, 
        actions: [NavigationActions.navigate({ 
         type: NavigationActions.NAVIGATE, 
         routeName: TO_HOME 
        })], 
       }), state); 
      break; 

     default: 
      if (action.type === NavigationActions.NAVIGATE) { 
       console.log('action: ' + JSON.stringify(action)); 
       console.log('state: ' + JSON.stringify(state)); 
       console.log('nextState: ' + JSON.stringify(RootNav.router.getStateForAction(action, state))); 
      } 

      nextState = RootNav.router.getStateForAction(action, state); 
      break; 
    } 

    return nextState || state; 
};

的console.logs的输出是：

首先点击：

action: {"type":"Navigation/NAVIGATE","routeName":"ClinicDetail","params":{"section":0,"from":"near"}} 
state: {"index":0,"routes":[{"routeName":"TO_HOME","key":"id-1496294907150-4"}]} 
nextState: {"index":0,"routes":[{"routeName":"TO_HOME","key":"id-1496294907150-4"}]}

第二点击：

action: {"type":"Navigation/NAVIGATE","routeName":"ClinicDetail","params":{"section":0,"from":"near"}} 
state: {"index":0,"routes":[{"routeName":"TO_HOME","key":"id-1496294907150-4"}]} 
nextState: {"index":0,"routes":[{"routeName":"TO_HOME","key":"id-1496294907150-4"}]}

什么样的检查，以这样做我可以防止这种情况发生？

来源

2017-06-01 jazzdle

基于this GitHub comment您可以添加在addNavigationHelpers一个navigateWithDebounce和调度此，而不是navigate：

_addNavigationHelpers = (navigation) => { 
    const original = addNavigationHelpers(navigation); 
    let debounce; 
    return { 
     ...original, 
     navigateWithDebounce: (routeName, params, action) => { 
      let func =() => { 
       if (debounce) { 
        return; 
       } 

       navigation.dispatch(NavigationActions.navigate({ 
        routeName, 
        params, 
        action 
       })); 

       debounce = setTimeout(() => { 
        debounce = 0; 
       }, 1000) 
      }; 
      return func(); 
     } 
    } 
};

来源

2017-06-01 07:11:47 Kerumen

这工作，但只有当你使用addNavigationHelpers。如果不是，也是基于在Github评论（Here），您可以覆盖的方法：

NavigationActions.overridedNavigate = (routeName, params, action) => { 
    // some override logic 
    return NavigationActions.navigate(routeName, params, action) 
}

来源

2017-06-01 14:08:26

我通过创建在通过间隔调用一个函数只有一次模块固定这个bug。

示例：如果您希望从主页导航 - >关于然后在说400 ms中按关于按钮两次。

navigateToAbout =() => dispatch(NavigationActions.navigate({routeName: 'About'})) 

const pressHandler = callOnce(navigateToAbout,400); 
<TouchableOpacity onPress={pressHandler}> 
... 
</TouchableOpacity>

该模块将小心它在400毫秒内调用navigateToAbout only once。

以下是NPM模块的链接：https://www.npmjs.com/package/call-once-in-interval

来源

2017-09-24 16:36:11

快速点击按钮时避免导航两次

回答

相关问题