在屏幕 React-Native 之间导航答案

【问题标题】：Navigate between screen React-Native在屏幕 React-Native 之间导航
【发布时间】：2019-02-07 12:24:06
【问题描述】：

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

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

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

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
})

【问题讨论】：

有什么问题？
问题：如果我理解正确，您希望根据用户是否登录有两个不同的 stackNavigator，对吗？然后在注销后您希望被重定向到您的登录屏幕以便能够再次登录？
@kivul，正是
@CristiDumitrache 检查我的答案，看看是否能解决您的问题
我会给你提示 1) 你需要嵌套导航 2) 在初始屏幕中使用导航 3) 用户注销时使用重置

标签： reactjs react-native navigation-drawer react-navigation

【解决方案1】：

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

让我们潜入

1) 嵌套导航（从 Drawer 中移除登录，将 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) 注销时使用reset

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

【讨论】：

【解决方案2】：

如果你想访问浏览屏幕必须安装两个插件。

反应导航

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

【讨论】：

我不认为这是问题所在

【解决方案3】：

代替

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';

【讨论】：