Question

我想要一个简单的功能，从抽屉物品按下退出。为此，我已经这样做了： -

const HomeNavigator = DrawerNavigator(
    {
       Splash: { screen: SplashScreen }
    }
)

这会在抽屉中添加一个项目，在点击它时，应用会导航到启动画面。但是使用这种方法我无法实现注销的全部功能。即： -

清除屏幕堆栈，以便在背面按下应用程序时不应返回带抽屉的屏幕。
应该在退出后应用程序从初始屏幕导航到登录屏幕。

我的上述解决方案不让我做这两件事。有没有更好的方法来实现我的要求？

更新

到目前为止，我的导航结构有点像这样： -

StackNavigator(
   Splash: {screen: SplashScreen},
   Login: {screen: LoginScreen},
   Home: {screen: HomeScreen},
)

HomeNavigator = DrawerNavigator(
   Logout: {screen: SplashScreen}
)

HomeScreen{
   render(){
       return <HomeNavigator navigation={this.props.navigation} />;
   }
}

您可以在两个导航器中看到我正在使用SplashScreen。在堆栈中，它是第一个屏幕，而在抽屉中，它用于注销。但是当我从抽屉屏幕导航到飞溅时，我失去了我之前为飞溅登录导航创建的StackNavigator。你能建议我做更好的方法吗？

Answer 1

您可以在启动画面的componentWillMount(){}中调用此功能：

clearStack = (routeToGo) =>  {
    const resetAction = NavigationActions.reset({
        index: 0,
        actions: [
            NavigationActions.navigate({ routeName: routeToGo })
        ]
    })
    this.props.navigation.dispatch(resetAction)
}

从react-navigation导入{NavigationActions}。您还可以使用DrawerNavigatorConfig中的contentComponent prop来创建自定义抽屉导航器，您可以在其中更改navItems的onPress以执行任何操作，例如调用函数来清除堆栈。

更新：在您的启动画面

componentWillMount(){
   this.clearStack('Login')
}

DrawerNavigator：除屏幕之外的DrawerItem

1 个答案: