陣營導航註銷按鈕上TabNavigator的

我有一個TabNavigator一個StackNavigator內側（在StackNavigator我有login視圖和TabNavigator，至極包含其他屏幕）。問題是我必須在只重定向到Login視圖的選項卡上創建類似'Logout'的按鈕。如果我試圖簡單地重定向到LoginView，TabBar仍然出現在屏幕的底部，這不是我想要的。有什麼方法可以點擊TabBar按鈕並返回到最初的StackNavigator？（像OnPress屬性或類似的東西）。陣營導航註銷按鈕上TabNavigator的

這裏是我的路由器

const tab_bar = TabNavigator({ 
     Home: { 
     screen: HomeScreen 
     }, 
     Logout: { 
     screen: LoginView // this just show the view but the tabBar still appearing 
     }, 
    }); 

const Login = StackNavigator({ 
    login: { 
    screen: LoginView, 
    }, 
    List: { 
    screen: tab_bar 
    ,navigationOptions: {header:null} 
    } 
}, 
{ 
    initialRouteName: 'login' 
});

來源

2017-09-18 Jose Vf

您可以對不希望Tabbar顯示的屏幕使用[tabBarVisible]（https://reactnavigation.org/docs/navigators/tab#tabBarVisible）道具。 – bennygenel

更好的方法是註銷一個路由棧，並登錄其中一個。在頂級應用程序中，如果loggedIn = true，則顯示該路線。傳遞一個screenprop將設置loggedIn：如果你想註銷它將呈現另一個堆棧 – zackify

如果我使用tabBarVisible我可以滑過其他屏幕，我需要的是像'goBack'在第一個'StackNavigator'（從「TabNavigator」到「loginView」） –

完成！使用tabBarOnPress屬性和Navigation Actions。

const tab_bar = TabNavigator({ // This tabNavigator is inside a stackNavigator, wich contains the 'login' view 
    Home: { 
    screen: Home 
    }, 
    Logout: { 
    screen: Logout  // Empty screen, useless in this specific case 
     ,navigationOptions: ({navigation}) => ({ 
      tabBarOnPress: (scene, jumpToIndex) => { 
       return Alert.alert( // Shows up the alert without redirecting anywhere 
        'Confirmation required' 
        ,'Do you really want to logout?' 
        ,[ 
        {text: 'Accept', onPress:() => { navigation.dispatch(NavigationActions.navigate({ routeName: 'login' }))}}, 
        {text: 'Cancel'} 
        ] 
       ); 
      }, 
     }) 
    }, 
});

當用戶點擊的TabBar的logout按鈕顯示警報確認操作，那麼如果用戶接受重定向到登錄視圖。

NOTE（22/09/2017）：要使用tabBarOnPress屬性，請下載master branch version（不是來自NPM的版本）。

來源

2017-09-22 13:08:02

陣營導航註銷按鈕上TabNavigator的

回答

相關問題