快速點擊按鈕時避免導航兩次

我正在使用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

快速點擊按鈕時避免導航兩次

回答

相關問題