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（）

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的外部屏幕组件，我应该如何定义pleaseTakeMeOutOfHere？

Answer 1

为此，您可能需要使用SwitchNavigator。

您可以为此LoginStack，HomeStack定义两个堆栈。

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

，然后使用this.props.navigation.navigate('HomeStack');导航到LoginStack

切换导航器不处理后退操作，当您离开时，它将路由重置为默认状态。

Answer 2

如果我导出到父导航器（如StackNavigator或SwitchNavigator），则像我在问题中一样，将DrawerNavigator呈现为孩子的组件，调用{{1} this.props.navigation.navigate('Login');中的}根本无法正常工作。我不知道为什么我猜是因为这样做会破坏导航链。我什至不记得我为什么这样做。我终于通过直接导出contentComponent来解决了这个问题

DrawerNavigator

要退出const Drawer = createDrawerNavigator({...},{...}); export default Drawer;而不是将其添加到堆栈中，我必须将DrawerNavigator替换为StackNavigator。感谢Pritish Vaidya的回答

尽管这个问题是针对我的情况的，但我希望任何人在遇到相同问题时都能从这里得到一个想法。谢谢

React Native：如何从DrawerNavigator的contentComponent内完全退出DrawerNavigator到其他屏幕组件？

2 个答案: