在我的React Native
应用程序中,我有一个StackNavigator
处理登录过程,还有一个DrawerNavigator
供已验证的用户使用。
当我退出应用程序然后重新登录时,我看到抽屉仍处于打开状态。单击注销后,我将在handleClickLogOut()
组件中调用Navigator
函数-参见下文。我以为通过访问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>
);
}
}
@@ Sam是解决方案的兄弟。
import {DrawerActions} from '@react-navigation/native'
然后您可以使用以下命令在DrawerContent.js文件中进行调用:
navigation.dispatch(DrawerActions.closeDrawer())
希望这对您有帮助👐。