使用反應導航將導航歷史記錄重置爲登錄屏幕

Question

登錄後（歡迎使用）用戶導航到首頁後，我重置歷史記錄，以便用戶不能像這樣回去：

const actionToDispatch = NavigationActions.reset({ 
      index: 0, 
      actions: [NavigationActions.navigate({ routeName: 'Home' })] 
     }); 

     this.props.navigation.dispatch(actionToDispatch); 

此功能正常。按下注銷後，用戶應該返回歡迎頁面，但它不起作用。以下是我在做什麼：

const resetAction = NavigationActions.reset({ 
      index: 0, 
      actions: [ 
       NavigationActions.navigate({ routeName: 'Welcome' }), 
      ] 
     }); 

     this.props.navigation.dispatch(resetAction); 

該錯誤說明沒有「歡迎」路線。必須是「主」，「隱私」，「條款」之一，這是主頁中某個選項卡的路線。看到他們在下面：

const AppStack = StackNavigator({ 
        Welcome: { 
         screen: Welcome 
        }, 
        Home: { 
         screen: Tabs 
        } 
       }, { 
         initialRouteName: this.state.isLoggedIn ? 'Home' : 'Welcome', 
         headerMode: 'none' 
        } 
       ); 

export const ProfileStack = StackNavigator({ 
    Profile: { 
     screen: Profile, 
    }, 
}); 

export const SettingsStack = StackNavigator({ 
    Settings: { 
     screen: Settings, 
    }, 
}, { 
    }); 

export const InfoStack = StackNavigator({ 
    Main: { 
     screen: Main, 
    }, 
    Privacy: { 
     screen: Privacy 
    }, 
    Terms: { 
     screen: Terms 
    } 
}); 

const routeConfiguration = { 

    Profile: { screen: ProfileStack }, 
    Settings: { screen: SettingsStack }, 
    Info: { screen: InfoStack } 
}; 

const tabBarConfiguration = { 
    tabBarOptions: { 
     activeTintColor: 'white', 
     inactiveTintColor: 'lightgray', 
     labelStyle: { 
      fontSize: Normalize(10), 
      fontFamily: Fonts.book 
     }, 
     style: { 
      backgroundColor: Colors.greenLightGradient, 
      borderTopWidth: 1, 
      borderTopColor: Colors.tabGreenLine 
     }, 
    } 
}; 

export const Tabs = TabNavigator(routeConfiguration, tabBarConfiguration); 

Answer 1

我在這裏找到了解決辦法：https://github.com/react-community/react-navigation/pull/789。

const resetAction = NavigationActions.reset({ 
      index: 0, 
      actions: [ 
       NavigationActions.navigate({ routeName: 'Welcome' }), 
      ], 
      key: null 
     }); 

this.props.navigation.dispatch(resetAction); 

關鍵：空是重要的組成部分。