React Native：在DrawerNavigator内实现登出并返回Login页面

嘿，这事儿不难，我给你两种可行的方案，你可以根据需求选：

首先，核心思路是在DrawerNav的登出操作里，调用导航器的方法跳回Login页面，同时保留你需要的alert('Alert')执行逻辑。

方法一：直接导航到Login（简单但保留历史栈） #

如果暂时不需要清除页面历史（不推荐登出场景，但可快速实现），直接在登出函数里调用navigate即可：

假设你有自定义的侧边栏组件（没有的话建议自定义，方便添加登出按钮），代码示例如下：

// 自定义Drawer侧边栏组件
class CustomDrawerSidebar extends React.Component {
  handleLogout = () => {
    alert('Alert'); // 这里的alert会正常执行
    // 跳转到Login页面
    this.props.navigation.navigate('Login');
  };

  render() {
    return (
      <View style={{ flex: 1, paddingTop: 50 }}>
        {/* 这里放你的侧边栏菜单列表，比如Home、Profile等选项 */}
        
        {/* 登出按钮 */}
        <TouchableOpacity 
          style={{ padding: 15, borderTopWidth: 1, borderTopColor: '#eee' }}
          onPress={this.handleLogout}
        >
          <Text style={{ fontSize: 16 }}>登出</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

// 你的DrawerNavigator定义
const DrawerNav = DrawerNavigator(
  {
    Home: { screen: HomeScreen },
    Profile: { screen: ProfileScreen },
    // 其他页面路由...
  },
  {
    contentComponent: CustomDrawerSidebar, // 指定自定义侧边栏
    // 其他Drawer配置...
  }
);

方法二：重置导航栈（推荐登出场景） #

如果想彻底清除历史，不让用户按返回键回到已登出的DrawerNav页面，用reset方法重置导航栈更合适，这样栈里只会保留Login页面：

修改上面的handleLogout函数即可：

handleLogout = () => {
  alert('Alert');
  // 重置导航栈，只保留Login页面
  this.props.navigation.reset({
    index: 0,
    routes: [{ name: 'Login' }],
  });
};

为什么推荐方法二？ #

登出后用户不应该再通过返回键回到已登出的页面，重置栈可以避免这种情况，更符合用户体验和安全逻辑。

最后确认下：你已经正确在MyStackNavigator里注册了Login和DrawerNav路由，所以直接用上面的代码就能实现需求啦~

内容的提问来源于stack exchange，提问作者Maki