Question

我正在使用典型的导航器构建一个应用程序，该导航器包含一个欢迎屏幕，登录屏幕，注册等。通过用户身份验证后，我便切换到抽屉导航。但是，我不确定我是否正确实现了Drawer Navigator。

示例rootNavigator：

const RootNavigator = () => {
  const app = useSelector(state => state.app);
  const isLoggedIn = app.user ? true : false;
  const showWelcome = app.showWelcome;

  if (isLoggedIn) {
    return (
      <Navigator headerMode="none">
        <Screen name="Home" component={AppDrawerNavigator} />
      </Navigator>
    );
  }

  return (
    <Navigator
      headerMode="none"
      initialRouteName={showWelcome ? 'Walkthrough' : 'Welcome'}>
      <Screen name="Walkthrough" component={WalkthroughScreen} />
      <Screen name="Welcome" component={WelcomeScreen} />
      <Screen name="Login" component={LoginScreen} />
      <Screen name="Signup" component={SignupScreen} />
      <Screen name="ForgotPassword" component={ForgotPasswordScreen} />
      <Screen name="ResetPassword" component={ResetPasswordScreen} />
    </Navigator>
  );
};

然后，当用户登录时，我将为AppDrawerNavigator返回以下内容：

const AppDrawerNavigator = () => {
  const insets = useSafeAreaInsets();

  return (
    <SafeAreaView
      mode="padding"
      style={[
        styles.safeArea,
        { paddingTop: insets.top, paddingBottom: insets.bottom },
      ]}
      edges={['right', 'left']}>
      <Drawer.Navigator
        screenOptions={{
          drawerType: 'front',
          gestureEnabled: true,
          swipeEnabled: false,
        }}
        drawerContent={props => <HomeDrawer {...props} />}>
        {/* Screens */}
        <Drawer.Screen name="Landing" component={LandingScreen} />
        <Drawer.Screen name="Profile" component={ProfileScreen} />
      </Drawer.Navigator>
    </SafeAreaView>
  );
};

我注意到这种实现方式的缺点是，在尝试检测当前视图的任何屏幕上，返回的路径都是“ Home”，这似乎是我实现方式的一个问题抽屉。

解决此问题的最佳方法是什么？我应该如何渲染“抽屉导航”？

将Drawer Navigator与React Navigation一起使用时的最佳做法

0 个答案: