createSwitchNavigator с React Navigation v5? - PullRequest
Новая
       51

createSwitchNavigator с React Navigation v5?

2 голосов
/ 07 мая 2020

В моей старой версии я делаю что-то вроде этого: иду на spla sh экран, если пользователь подключен go к приложению, иначе go для входа в систему.

И я могу перейти на экран используя this.props.navigation.navigate("Register")

SplashScreen. js: 

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

в приложении. js

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

//Other code

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

Теперь я пытаюсь использовать React Navigation v5, но все кажется более сложным.

Мое приложение. 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.com/samuel3105/react-native-navigation

1 Ответ

0 голосов
/ 07 мая 2020

Вы можете просто выполнить вызов 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>
  );
}
...