在屏幕React-Native之间导航

Question

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

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

问题是：按下退出按钮后返回登录界面。我不能再登录了（仪表板仍然在堆栈中，因为如果按下后退按钮它会让我在那里）。抽屉也出现在登录屏幕中

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

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

反应导航

反应天然-姿势的处理程序

请遵循以下示例代码：

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的componentDidMount()导航到适当的路线

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

3）注销时使用重置

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