Question

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

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

问题是：按退出按钮并返回到登录屏幕后。我无法登录（仪表盘仍在堆栈中，因为如果按返回按钮，它将到达该位置）。抽屉也出现在“登录”屏幕中

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类的render方法的外观：

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

return (
  <RootStackLogin/>
)

这是我的抽屉：

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

Answer 1

如果要访问屏幕，必须安装两个插件。

反应导航

react-native-gesture-handler

遵循以下示例代码：

import { createStackNavigator, createAppContainer } from "react-navigation";

const MyDrawerNavigator = createDrawerNavigator({
Home: {
screen: MyHomeScreen,
},
Notifications: {
screen: MyNotificationsScreen,
},
});

const MyApp = createAppContainer(MyDrawerNavigator);

检查此链接：navigation documentaion

Answer 2

代替

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

return (
  <RootStackLogin/>
)

尝试一下：

if (this.state.isAuth) {
  navigation.dispatch(StackActions.reset(
    { index: 0, key: null, actions: [NavigationActions.navigate({ routeName: 'RootStackDashboard' })] }
  ))
} else {
  navigation.dispatch(StackActions.reset(
    { index: 0, key: null, actions: [NavigationActions.navigate({ routeName: 'RootStackLogin' })] }
  ))
}

您可以在此处查看更多信息：https://reactnavigation.org/docs/en/stack-actions.html

但是基本上，重置操作会擦除整个导航状态，并用您定义的其他内容替换。

也不要忘记导入：

import { NavigationActions, StackActions } from 'react-navigation';

Answer 3

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

让我们开始吧

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）在App的{{1}}中导航至适当的路线

componentDidMount()

3）注销时使用重置

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

在屏幕React-Native之间导航

3 个答案: