12

使用 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 - 这似乎更简单。

4

5 回答 5

21

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

于 2020-02-25T21:42:26.417 回答
5

我还使用过 Navigator 4 的 SwitchNavigator，然后在将其他页面迁移到 Navigator 5 后，我尝试将身份验证部分移至 Navigator 5。我无法使用 Navigator 5 实现 SwitchNavigator 功能。然后决定使用 Navigation 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 验证令牌并根据值导航到“登录”或“主页”页面 
_checkAuthetication = async() =>{
  const isUserAuthenticated= await AsyncStorage.getItem("isAuthenticated");
  this.props.navigation.navigate(isUserAuthenticated ? 'App':'Auth');
}
于 2020-07-14T18:46:03.997 回答
2

嘿，反应导航 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 navigator 导入到您的 app.js 文件中，如下所示：

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

于 2020-06-15T21:00:52.280 回答
0

这是上述查询

[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;
于 2020-07-05T15:07:06.550 回答
0

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

于 2022-02-05T14:05:11.073 回答