带有反应导航的 switchNavigator 5

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。 documentation isn't helpful either. Is the use now not recommended? My use case is to show login screen before user is logged in and switch to the app after user logs in. React-navigation has given an example of authentication flow 但是否可以使用 switchNavigator - 这似乎更简单。

Answer 1

switchNavigator 已被移除，因为您现在可以借助渲染组件有条件地.[=11= 做完全相同的事情]

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 中的行完全替换 旧的切换导航器。

Answer 2

嘿，react navigation 5 中没有切换导航器，但是您可以在同一行上执行此操作或其他操作：

import React, { useEffect } from 'react'
import { StyleSheet, Text, View, ActivityIndicator } from 'react-native'
import { NavigationContainer } from "@react-navigation/native";
import BottomTabsNavigator from './BottomTabsNavigator'
import AccountNavigator from './AccountNavigator'
import firebase from '../api/config'


const SwitchNavigator = ({navigation}) => {
    useEffect(() => {
        firebase.auth().onAuthStateChanged(user => {
            navigation.navigate(user ? "BottomTabsNavigator" : "AccountNavigator")
        })
      }, [])



    return (
        <View style={styles.container}>
            <Text>Loading...</Text>
            <ActivityIndicator size="large" color="#e9446a"></ActivityIndicator>
        </View>
    )
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    }
})

export default SwitchNavigator

然后是 Stack Navigator :

import React from 'react'
import { createStackNavigator } from '@react-navigation/stack'
import BottomTabsNavigator from './BottomTabsNavigator'
import AccountNavigator from './AccountNavigator'
import SwitchNavigator from './SwitchNavigator'
import { NavigationContainer } from "@react-navigation/native";

const StackApp = createStackNavigator()

export default function Stack() {
   return (
      <NavigationContainer>
      <StackApp.Navigator initialRouteName='Loading' headerMode='none'>
        <StackApp.Screen name='Loading' component={SwitchNavigator} />
        <StackApp.Screen name='AccountNavigator' component={AccountNavigator}/>
        <StackApp.Screen name='BottomTabsNavigator' component={BottomTabsNavigator}/>
      </StackApp.Navigator>
     </NavigationContainer>

)
}

然后像这样将 Stack 导航器导入到您的 app.js 文件中：

export default App = () => ( <Stack /> )

Answer 3

这是上述查询w.r.t

[Then how could we later navigate from a "LoginScreen" (inside
AuthNavigator ) to "HomeScreen" (inside MyCustomNavigator )? – TalESid
Apr 7 at 8:33 ]

const AuthNavigator = () => {
  return(
  <AuthStack.Navigator>
  <Stack.Screen
    name="Login"
    component={Login}
    options={{ headerShown: false }}
  />
  <Stack.Screen
    name="SignUp"
    component={SignUp}
    options={{ headerShown: false }}
  />
  </AuthStack.Navigator>
);
  }
const MyCustomNavigator = () => {
  return(
  <AppStack.Navigator>
  <Stack.Screen
    name="Home"
    component={Home}
    options={{ headerShown: false }}
  />
  <Stack.Screen
    name="ListScreen"
    component={ListScreen}
    options={{ headerShown: false }}
  />
  <Stack.Screen
    name="Settings"
    component={Settings}
    options={{ headerShown: false }}
  />
  </AppStack.Navigator>
  );
}

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

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

Answer 4

我也用过 Navigator 4 的 SwitchNavigator 然后在将其他页面迁移到 Navigator 5 后，我尝试将身份验证部分移动到 Navigator 5。我无法使用 Navigator 5 实现 SwitchNavigator 功能。然后决定使用“兼容层”导航中提供 API 5. https://reactnavigation.org/docs/5.x/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 验证令牌并根据值导航到 "Login" 或 "Home" 页面

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

Answer 5

react-navigationv5 或 v6 中没有切换导航器。但是，我发现 switch 很容易，我发现 stack 很难用，所以我继续使用 react-navigation v4.2.0 或 4.4.1，所以我可以继续使用 switch

带有反应导航的 switchNavigator 5

switchNavigator with react-navigation 5

react-native

react-navigation

react-navigation-v5