时间戳

首页 > 解决方案 > 在屏幕 React-Native 之间导航

reactjs - 在屏幕 React-Native 之间导航

问题描述

我有三个简单的屏幕：登录、仪表板和关于。

我想创建一个抽屉菜单，从中可以在屏幕之间导航。如果我没有登录，我希望登录屏幕可以让我进入我有抽屉的仪表板。在那里我可以点击退出，然后我回到登录屏幕。如果我已经登录，我希望第一个屏幕是包含抽屉的仪表板。此外，如果我单击注销以导航到登录。

问题是：在我按下注销按钮并返回登录屏幕后。我无法再登录（仪表板仍在堆栈中，因为如果我按下后退按钮，它会让我到达那里）。抽屉也出现在登录屏幕中

const RootStackLogin = createStackNavigator(
{
  Login: {
    screen: Login,
  },
  Dashboard: {
    screen: Dashboard,
  },
  App: {
    screen: App,
    navigationOptions: ({navigation}) => ({
      header:null
    })
  }
},
{
  initialRouteName: 'Login',
}

const RootStackDashboard = createStackNavigator(
{
  Login: Login,
  App: {
    screen: App,
    navigationOptions: ({navigation}) => ({
      header:null
    })
  }
},
{
  initialRouteName: 'App',
}

这是我的 Splash 类中的渲染方法的外观：

if (this.state.isAuth) {
  return (
    <RootStackDashboard/>
  )
}

return (
  <RootStackLogin/>
)

这是我的抽屉：

const AppDrawerNavigator = createDrawerNavigator({
  Dashboard: {
    screen: Dashboard,
  },
  Login: {
    screen: Login,
  },
  About: {
    screen: About,
  },
},
{
  contentComponent: CustomContentComponent
})

标签： reactjsreact-nativenavigation-drawerreact-navigation

解决方案

您需要的是嵌套导航，在初始屏幕中导航并在注销时导航到登录。

让我们潜入

1）嵌套导航（从抽屉中删除登录，将AppDrawerNavigator添加到RootNavigation中）

const AppDrawerNavigator = createDrawerNavigator({
  Dashboard: {
    screen: Dashboard,
  },
  About: {
    screen: About,
  },
},
{
  contentComponent: CustomContentComponent
})

const RootNavigation = createStackNavigator({
  Drawer: AppDrawerNavigator,
  Login: Login,
  App: {
    screen: App,
    navigationOptions: ({navigation}) => ({
      header:null
    })
  }
},
{
  initialRouteName: 'App',
}

2) In导航到适当App的componentDidMount()路线

StackActions.push({
  routeName: this.state.isAuth ? "Drawer" : "Login"
});

3）注销时使用重置

StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({ routeName: "Login" })],
});

推荐阅读