用React Navigation v5创建SwitchNavigator？

Question

我的旧版本是这样的：进入闪屏，如果用户已连接，则进入App，否则进入登录。

而我可以通过使用 this.props.navigation.navigate("Register")

SplashScreen.js。

    componentDidMount(){
        firebase.auth().onAuthStateChanged(user => {
            this.props.navigation.navigate(user ? "App" : "Login")
        });
    }

在App.js中

const Container = createAppContainer(
    createSwitchNavigator(
        {
            Splash: SplashScreen,
            Login: LoginScreen,
            Register: RegisterScreen,
            App: AppContainer,
        },
        {
            initialRouteName: "Splash",
        }
    )
);

//Other code

    render(){
        return (<Container/>)
    }

现在我尝试使用react Navigation v5，但一切都显得更加复杂。

我的App.js是这样的。

export default function App() {
    const [isDarkTheme, setIsDarkTheme] = React.useState(false);

    const theme = isDarkTheme ? CombinedDarkTheme : CombinedDefaultTheme; // Use Light/Dark theme based on a state

    function toggleTheme() {
        // We will pass this function to Drawer and invoke it on theme switch press
        setIsDarkTheme(isDark => !isDark);
    }

    return (
        <PaperProvider theme={theme}>
            <NavigationContainer theme={theme}>
                <Drawer.Navigator
                    drawerContent={props => <DrawerContent {...props} toggleTheme={toggleTheme}/>}
                >
                    <Drawer.Screen
                        name="HomeDrawer"
                        component={MainTabScreen}
                    />
                    <Drawer.Screen
                        name="SettingsScreen"
                        component={SettingsStackScreen}
                    />
                </Drawer.Navigator>
            </NavigationContainer>
        </PaperProvider>
    );
}

我应该如何做这样的事情，但是用的是 PaperProvider ?

这里有我的完整代码，如果你想看的话。https:/github.comsamuel3105react-native-navigation。

Answer 1

你可以简单地做你的API调用，并根据结果，显示或不显示路径。类似于:

import { useEffect } from 'react';

export default function App() {
  const [isDarkTheme, setIsDarkTheme] = React.useState(false);
  const [isAuthed, setIsAuthed] = React.useState(false);

  useEffect(async () => setIsAuthed(await getIsAuthed()));

  const theme = isDarkTheme ? CombinedDarkTheme : CombinedDefaultTheme; // Use Light/Dark theme based on a state

  function toggleTheme() {
    // We will pass this function to Drawer and invoke it on theme switch press
    setIsDarkTheme((isDark) => !isDark);
  }

  const defineRoutes = () => {
    if (!isAuthed) {
      return <Drawer.Screen name='Login' component={Login} /> // Don't know your login comp name, but you got the idea
    }

    // Don'tknow if Fragment exists on react native and is usable here, just try
    return (
      <Fragment>
        <Drawer.Screen name='HomeDrawer' component={MainTabScreen} />
        <Drawer.Screen name='SettingsScreen' component={SettingsStackScreen} />
      </Fragment>
    );
  };

  return (
    <PaperProvider theme={theme}>
      <NavigationContainer theme={theme}>
        <Drawer.Navigator
          drawerContent={(props) => (
            <DrawerContent {...props} toggleTheme={toggleTheme} />
          )}
        >
          {defineRoutes()}
        </Drawer.Navigator>
      </NavigationContainer>
    </PaperProvider>
  );
}