Кнопка выхода React Navigation на TabNavigator

у меня есть TabNavigator внутри StackNavigator (в StackNavigator у меня есть представление login и TabNavigator, которое содержит другие экраны). Проблема в том, что мне нужно сделать что-то вроде кнопки «Logout» на вкладке, которая просто перенаправляет на представление Login. Если я попытаюсь просто перенаправить на LoginView, TabBar все равно появится внизу экрана, а это не то, что мне нужно. Есть ли способ нажать на кнопку TabBar и вернуться к исходному StackNavigator? (Например, свойство OnPress или что-то в этом роде).

вот мой роутер

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'
});

react-native react-navigation tabnavigator
person Jose Vf    schedule 18.09.2017    source источник
comment
Вы можете использовать tabBarVisible для экрана, на котором панель вкладок не должна отображаться.   -  person bennygenel    schedule 18.09.2017
comment
Лучший способ сделать это - выйти из стека маршрутов и войти в него. В вашем приложении верхнего уровня, если loggedIn = true, покажите маршруты для этого. Передайте screenprop, который установит loggedIn:false, если вы хотите выйти из системы, и он отобразит другой стек   -  person zackify    schedule 18.09.2017
comment
Если я использую tabBarVisible, я могу прокручивать другие экраны, что мне нужно, это как goBack в первом StackNavigator (от TabNavigator до loginView)   -  person Jose Vf    schedule 18.09.2017

Ответы (1)


arrow_upward
4
arrow_downward

Готово! Использование свойства tabBarOnPress и Действия навигации.

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'}
                    ]
               );
           },
       })
    },
});

Когда пользователь нажимает кнопку logout на вкладке TabBar, отображается предупреждение для подтверждения действия, а затем, если пользователь принимает перенаправление в представление входа.

ПРИМЕЧАНИЕ (22 сентября 2017 г.). Чтобы использовать свойство tabBarOnPress, загрузите версия главной ветки (пока не версия из NPM).

person Jose Vf    schedule 22.09.2017
comment
Пару лет спустя, и это благословение для меня. - person Reez0; 08.08.2019