当用户通过身份验证时，如何导航用户到登录屏幕

Question

我有一个根 StackNavigator，它有另外两个导航器1 个堆栈导航器(登录、注册(2 选项卡导航器(主页、配置文件、设置(

那么当用户登录成功时，我如何从rootNavigator转到tabNavigator？

import React from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation'
import authNavi from './AuthRoute';  /// this is StackNavigator with login signup screen
import appNavi from './AppRoute' /// this is tabNAvigator with profile home setting screen
const RootRoute = createStackNavigator({ 
    auth: {screen: authNavi },
    app: {screen: appNavi }
})
const RootNavi = createAppContainer(RootRoute);
export default RootNavi;  /// this is rootNavigator whih is rendered in App.js

这是App.js和RootRouter的图像

Answer 1

您可以通过以下方式从身份验证堆栈导航到 tabNavigator：

this.props.navigation.navigate('app');

建议我建议你用一个开关导航器替换你的主堆栈导航器......因为在用户成功登录后，您将不需要他们再次访问您的身份验证流。

Answer 2

通过使用切换导航器，您可以实现这一点。

从react-navigation导入createSwitchNavigator

例如：

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

之后添加开关导航器。

...
const switchNavigator = createSwitchNavigator(
  {
    LoginStack: authNavi,
    AppTabs: appNavi
  },
  { headerMode: "none", initialRouteName: "LoginStack" }
);
const App = createAppContainer(switchNavigator);
export default App;

当你想换回家时，用这个

this.props.navigation.navigate("AppTabs");

它会将导航切换到选项卡栏导航。