带有反应导航 5 的 switchNavigator

Question

使用 react-navigation 4，我能够从“react-navigation”包中导入和使用 switchNavigator。

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

import MainTabNavigator from "./MainTabNavigator";
import LoginScreen from "../screens/LoginScreen";
import AuthLoadingScreen from "../screens/AuthLoadingScreen";

export default createAppContainer(
  createSwitchNavigator(
    {
      App: MainTabNavigator,
      Auth: AuthLoadingScreen,
      Login: createStackNavigator({ Login: LoginScreen })
    },

    {
      initialRouteName: "Auth"
    }
  )
);

使用 react-navigation 5，我在包中看不到 createSwitchNavigator 了。该文档也没有帮助。现在不推荐使用吗？我的用例是在用户登录之前显示登录屏幕，并在用户登录后切换到应用程序。 React-navigation 给出了一个身份验证流程的例子，但是否可以使用 switchNavigator - 这似乎更简单。

Answer 1

switchNavigator 已被删除，因为您现在可以在有条件地呈现组件的帮助下完成完全相同的工作。

import React from 'react';
import {useSelector} from "react-redux";
import {NavigationContainer} from "@react-navigation/native";

import { AuthNavigator, MyCustomNavigator } from "./MyCustomNavigator";

const AppNavigator = props => {
    const isAuth = useSelector(state => !!state.auth.access_token);

    return (
        <NavigationContainer>
            { isAuth && <MyCustomNavigator/>}
            { !isAuth && <AuthNavigator/>}
        </NavigationContainer>
    );
};
export default AppNavigator;

NavigationContainer 内的行完全取代了旧的 switch navigator。

Answer 2

我也使用了 Navigator 4 的 SwitchNavigator 然后在将其他页面迁移到 Navigator 5 之后，我尝试将身份验证部分移动到 Navigator 5。我无法使用 Navigator 5 实现 SwitchNavigator 功能。然后决定使用 Navigation API 5 中提供的“兼容层” . https://reactnavigation.org/docs/compatibility/
希望下面的代码对你有用。

import { createStackNavigator } from '@react-navigation/stack'
import { NavigationContainer } from '@react-navigation/native';
import { createSwitchNavigator } from "@react-navigation/compat";
import { createCompatNavigatorFactory } from '@react-navigation/compat'
 const AppStack = createCompatNavigatorFactory(createStackNavigator)(
      { screen: Home },
      {headerMode:'none'}
 );
 const AuthStack = createCompatNavigatorFactory(createStackNavigator)({ screen:Login });
const SwitchNavigator= createSwitchNavigator(
      {
    Starter: AuthValidation,
    App: AppStack,
    Auth: AuthStack
  },
  {
    initialRouteName:'Starter'
  }
);
export default function App (){
  
    return(
      <NavigationContainer>
          <SwitchNavigator/>
      </NavigationContainer>
    );
}

这里 AuthValidation 验证令牌并根据值导航到“登录”或“主页”页面

_checkAuthetication = async() =>{
  const isUserAuthenticated= await AsyncStorage.getItem("isAuthenticated");
  this.props.navigation.navigate(isUserAuthenticated ? 'App':'Auth');
}