React-Native Navigation.Navigate to tab.screen not visible in tab bar

Question

概览

我正在构建一个应用程序，它有两个主要部分，分别称为“Auth”和“Authenticated”。 Auth 用于登录用户，Authenticated 用于用户登录时的堆栈。

Auth 使用堆栈导航，而 Authenticated 使用标签导航；特别是

createBottomTabNavigator

.

经过身份验证后，用户可以在底部看到一个标签栏，其中包含三个链接：书架、创建图书和帐户。我想将用户导航到另一个名为“书籍”的屏幕，该屏幕可以看到他们在“创建书籍”中完成表格或在“书架”中打开书籍。

问题

如何将这个新屏幕添加到我的 Authenticated 堆栈但不让它出现在选项卡栏中？这对我来说听起来很直接，但一直在寻找几个小时并且没有运气。

教程似乎也暗示了嵌套堆栈，因此您可以混合使用酒吧和汉堡菜单。我找到的最接近的答案是我可以添加到名为

tabBarShowLabel

的 Tab.Screen 并将其设置为 false 的属性。然而，这仍然为图标和标签保留了空间，并且由于某种原因显示了一个向下的插入符号。

这是我的堆栈代码：

export const App = () => {
  const [isMiniumLoadTimePassed, setIsMiniumLoadTimePassed] = useState(false);
  const [loaded] = useFonts({
    Luminari: Luminari,
    LucidaGrande: LucidaGrande,
  });

  // Create a minium load time experience
  const miniumLoadTime = 1300;
  setTimeout(() => {
    setIsMiniumLoadTimePassed(true);
  }, miniumLoadTime);
  if (!loaded || !isMiniumLoadTimePassed) {
    return <SplashScreen />;
  }

  return (
    <AuthContextProvider>
      <StatusBar style="light" />
      <Navigation />
    </AuthContextProvider>
  );
};

const Navigation = () => {
  const authCxt = useContext(AuthContext);
  return (
    <NavigationContainer>
      {!authCxt.isAuthenticated && <AuthStack />}
      {authCxt.isAuthenticated && <AuthenticatedStack />}
    </NavigationContainer>
  );
};

const AuthStack = () => {
  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false,
      }}
    >
      <Stack.Screen name="Login" component={LoginScreen} />
      <Stack.Screen name="CreateAccount" component={CreateAccount} />
      <Stack.Screen name="ForgotPassword" component={ForgotPassword} />
    </Stack.Navigator>
  );
};

const AuthenticatedStack = () => {
  return <TabBar />;
};

export default App;

这里是TabBar的代码：

export const TabBar = () => {
  const Tab = createBottomTabNavigator();
  return (
    <Tab.Navigator
      screenOptions={{
        headerShown: false,
        tabBarShowLabel: false,
        showIcon: true,
        tabBarStyle: {
          position: "absolute",
          bottom: 25,
          left: 20,
          right: 20,
          elevation: 0,
          backgroundColor: white,
          borderRadius: 15,
          height: 90,
          ...styles.shadow,
        },
      }}
    >
      <Tab.Screen
        name="BookShelf"
        component={BookShelf}
        options={{
          tabBarIcon: ({ focused }) => {
            return (
              <View
                style={{
                  alignItems: "center",
                  justifyContent: "center",
                  top: 10,
                }}
              >
                <FontAwesome5
                  name="book"
                  size={20}
                  color={focused ? orange : background}
                />
                <Text
                  style={[
                    styles.tabText,
                    { color: focused ? orange : background },
                  ]}
                >
                  Bookshelf
                </Text>
              </View>
            );
          },
        }}
      />
      <Tab.Screen
        name="CreateBook"
        component={CreateBook}
        options={{
          tabBarIcon: ({ focused }) => {
            return (
              <View
                style={{
                  alignItems: "center",
                  justifyContent: "center",
                  top: -20,
                }}
              >
                <View
                  style={[
                    styles.createBookIconWrapper,
                    { borderColor: focused ? orange : white },
                  ]}
                >
                  <Image source={logoImage} style={styles.createBookIcon} />
                </View>
                <Text
                  style={[
                    styles.createBookIconText,
                    { color: focused ? orange : background },
                  ]}
                >
                  Create Book
                </Text>
              </View>
            );
          },
        }}
      />
      <Tab.Screen
        name="Account"
        component={Account}
        options={{
          tabBarIcon: ({ focused }) => {
            return (
              <View
                style={{
                  alignItems: "center",
                  justifyContent: "center",
                  top: 10,
                }}
              >
                <FontAwesome5
                  name="user-circle"
                  size={20}
                  color={focused ? orange : background}
                />
                <Text
                  style={[
                    styles.tabText,
                    { color: focused ? orange : background },
                  ]}
                >
                  Account
                </Text>
              </View>
            );
          },
        }}
     
      />
      <Tab.Screen  />
    </Tab.Navigator>
  );
};