在 React Native 中注销时关闭抽屉

Question

在我的 React Native 应用程序中，我有一个处理登录过程的 StackNavigator 和一个供经过身份验证的用户使用的 DrawerNavigator。

当我退出应用程序然后重新登录时，我看到抽屉仍然打开。当我点击注销时，我调用了 Navigator 组件中的 handleClickLogOut() 函数——见下文。我想通过访问 MainMenuDrawer，我可以访问 closeDrawer() 方法，但我在那里没有看到它。

如何在此代码中注销时关闭抽屉？

这是 Navigator 组件：

const LogInStack = new createStackNavigator();
const MainMenuDrawer = createDrawerNavigator();

class Navigator extends Component {

    constructor(props) {
        super(props);
        this.handleClickLogOut = this.handleClickLogOut.bind(this);
    }

    componentDidMount() {

        if (this.props.isAuthenticatedUser && !this.props.isAuthenticated)
            this.props.actions.setIsAuthenticated(true);
    }

    handleClickLogOut() {

        removeAuthenticationData()
            .then(() => {

                return this.props.actions.setIsAuthenticated(false);
            });
    }

    render() {
        return (
            <NavigationContainer>
                {
                    this.props.isAuthenticated
                    ? <MainMenuDrawer.Navigator drawerContent={(navigation) => <DrawerContent member={this.props.member} navigation={navigation} handleClickLogOut={this.handleClickLogOut} />}>
                        <MainMenuDrawer.Screen name="Home" component={Dashboard} />
                        <MainMenuDrawer.Screen name="ToDoList" component={ToDoList} />
                      </MainMenuDrawer.Navigator>
                    : <LogInStack.Navigator screenOptions={{ headerShown: false }}>
                        <LogInStack.Screen name="LoginScreen" component={Login} />
                      </LogInStack.Navigator>
                }
            </NavigationContainer>
        );
    }
}

Answer 1

@Sam大哥来解答

import {DrawerActions} from '@react-navigation/native'

然后你可以调用 DrawerContent.js 文件：

navigation.dispatch(DrawerActions.closeDrawer())

希望这对您有所帮助。

这是我在 DrawerContent.tsx 文件中的真实代码