帶有 React Navigation v5 的 createSwitchNavigator？

Question

我的舊版本是這樣的：如果用戶將 go 連接到應用程序，則進入啟動屏幕，否則 go 登錄。

我可以使用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做這樣的事情？

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>
  );
}