React Native: Как из компонента DrawerNavigator в contentComponent полностью выйти из DrawerNavigator в другой компонент экрана?

Question

У меня проблема с удалением от компонента содержимого навигатора ящика

Nav (компонент корневого экрана навигатора) render ()

render() {
    const Drawer = createDrawerNavigator({
            Home : {screen : Home},
            Settings : {screen : Settings}
        },{
            contentComponent: DrawerContent,
            drawerWidth: 200,
            drawerPosition: 'left',
            drawerOpenRoute: 'DrawerOpen',
            drawerCloseRoute: 'DrawerClose',
            drawerToggleRoute: 'DrawerToggle',
    });
    return (<Drawer/>);
}

Визуализация DrawerContent ()

render() {return (<FlatList 
    data : ['Home', 'Settings', 'Logout'],
    renderItem : {({item, index}) => {
        return (<Button
            title = {item} 
            onPress = {() => {
                if(index != 2) this.props.navigation.dispatch(NavigationActions.navigate({routeName: item}));
                else this.pleaseTakeMeOutOfHere();
            }}
        />);
    }}
/>)}

Предположим, я хочу выйти из Nav на внешний экранный компонент, называемый Login, как мне определить, пожалуйста, TakeMeOutOfHere?

Answer 1

Если я экспортирую в родительский навигатор (например, StackNavigator или SwitchNavigator), компонент, который отображает DrawerNavigator как дочерний элемент, как я делал в вопросе, вызывает this.props.navigation.navigate('Login'); из contentComponent, который не работает на все. Я не знаю почему. Я думаю, потому что навигационная цепочка нарушается при этом. Я даже не помню, почему я это сделал. Я наконец исправил это, экспортировав DrawerNavigator напрямую

const Drawer = createDrawerNavigator({...},{...});
export default Drawer;

И чтобы выйти из DrawerNavigator вместо добавления его в стек, я должен заменить StackNavigator на SwitchNavigator. Спасибо Притиш Вайдья за ответ

Хотя этот вопрос специфичен для моего случая, я надеюсь, что кто-нибудь получит представление, когда столкнется с той же проблемой. Спасибо

Answer 2

Для этого вам, вероятно, потребуется использовать SwitchNavigator .

Для этого LoginStack, HomeStack.

export default createSwitchNavigator(
  {
    LoginStack: LoginStack,
    HomeStack: HomeStack,
  },
  {
    initialRouteName: 'HomeStack',
  }
);

можно определить два стека.а затем используйте this.props.navigation.navigate('HomeStack'); для перехода из LoginStack

Переключить навигатор не обрабатывает ответные действия и сбрасывает маршруты в их состояние по умолчанию при переключении .