Навигация между экранами React-Native

Question

У меня есть три простых экрана: Вход в систему, Панель управления и О .

Я хочу создать меню «Ящик», в котором можно перемещаться между экранами.Если я не вошел в систему, я хочу, чтобы у меня был экран входа в систему, который выводит меня на панель инструментов, где у меня есть ящик.Там я могу нажать кнопку «Выйти», и это возвращает меня к экрану входа в систему.Если я уже вошел в систему, я хочу, чтобы на первом экране была панель инструментов с выдвижным ящиком.Кроме того, если я нажимаю «Выйти», чтобы перейти к «Входу в систему».

Проблема заключается в следующем: после того, как я нажму кнопку выхода из системы и вернусь к экрану входа в систему.Я больше не могу войти (приборная панель все еще в стеке, потому что, если я нажму кнопку «Назад», она попадет туда).И ящик появляется на экране входа в систему также

const RootStackLogin = createStackNavigator(
{
  Login: {
    screen: Login,
  },
  Dashboard: {
    screen: Dashboard,
  },
  App: {
    screen: App,
    navigationOptions: ({navigation}) => ({
      header:null
    })
  }
},
{
  initialRouteName: 'Login',
}

const RootStackDashboard = createStackNavigator(
{
  Login: Login,
  App: {
    screen: App,
    navigationOptions: ({navigation}) => ({
      header:null
    })
  }
},
{
  initialRouteName: 'App',
}

Вот как выглядит метод рендеринга из моего класса Splash:

if (this.state.isAuth) {
  return (
    <RootStackDashboard/>
  )
}

return (
  <RootStackLogin/>
)

А это мой ящик:

const AppDrawerNavigator = createDrawerNavigator({
  Dashboard: {
    screen: Dashboard,
  },
  Login: {
    screen: Login,
  },
  About: {
    screen: About,
  },
},
{
  contentComponent: CustomContentComponent
})

Answer 1

Вместо

if (this.state.isAuth) {
  return (
    <RootStackDashboard/>
  )
}

return (
  <RootStackLogin/>
)

Попробуйте это:

if (this.state.isAuth) {
  navigation.dispatch(StackActions.reset(
    { index: 0, key: null, actions: [NavigationActions.navigate({ routeName: 'RootStackDashboard' })] }
  ))
} else {
  navigation.dispatch(StackActions.reset(
    { index: 0, key: null, actions: [NavigationActions.navigate({ routeName: 'RootStackLogin' })] }
  ))
}

Вы можете увидеть больше здесь: https://reactnavigation.org/docs/en/stack-actions.html

Но в основном действие сброса уничтожит всесостояние навигации и замените его на что-то другое, определенное вами.

Также не забудьте импортировать:

import { NavigationActions, StackActions } from 'react-navigation';

Answer 2

Вам нужна вложенная навигация, навигация на заставке и вход в систему при выходе из системы.

Давайте погрузимся в

1) Вложенная навигация (удаление входа из ящика, добавление AppDrawerNavigator в RootNavigation)

const AppDrawerNavigator = createDrawerNavigator({
  Dashboard: {
    screen: Dashboard,
  },
  About: {
    screen: About,
  },
},
{
  contentComponent: CustomContentComponent
})

const RootNavigation = createStackNavigator({
  Drawer: AppDrawerNavigator,
  Login: Login,
  App: {
    screen: App,
    navigationOptions: ({navigation}) => ({
      header:null
    })
  }
},
{
  initialRouteName: 'App',
}

2) В App componentDidMount() перейдите к соответствующему маршруту

StackActions.push({
  routeName: this.state.isAuth ? "Drawer" : "Login"
});

3) При выходе используйте сброс

StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({ routeName: "Login" })],
});

Answer 3

Если вам нужен доступ для навигации по экранам, вы должны установить два плагина.

реагировать-навигация

реагировать-нативный-жест-обработчик

Воспользуйтесь этим примером кода:

import { createStackNavigator, createAppContainer } from "react-navigation";

const MyDrawerNavigator = createDrawerNavigator({
Home: {
screen: MyHomeScreen,
},
Notifications: {
screen: MyNotificationsScreen,
},
});

const MyApp = createAppContainer(MyDrawerNavigator);

проверьте эту ссылку: документация по навигации