始终显示 BottomTabNavigation

Question

如何在堆叠屏幕上显示 BottomTabNavigation？我已经尝试了几个小时，但确实没有按预期工作。

所以我想要发生的事情是，如果我导航到例如标题屏幕，我仍然想显示 BottomTabNavigation。有什么建议吗？

我当然可以创建一个新的导航，但它是从侧面滑入的。

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

const HomeTabNavigator = () => {
  return (
    <Tab.Navigator
      tabBarOptions={{
        labelStyle: {textTransform: 'uppercase'},

        style: {
          backgroundColor: '#111111', //Färger på footerbar
          borderTopColor: 'transparent',
          borderBottomColor: 'transparent',
        },
      }}>
      <Tab.Screen
        name={'Concerts'}
        component={ConcertsScreen}
        options={{
          tabBarIcon: ({tintColor}) => (
            <Image
              source={require('../../assets/icons/concerts.png')}
              size={25}
            />
          ),
        }}
      />
      <Tab.Screen
        name={'Docs'}
        component={DocumentiesScreen}
        options={{
          tabBarIcon: ({tintColor}) => (
            <Image source={require('../../assets/icons/docs.png')} size={25} />
          ),
        }}
      />

      <Tab.Screen
        name={'Profile'}
        component={ProfileScreen}
        options={{
          tabBarIcon: ({tintColor}) => (
            <Image source={require('../../assets/icons/user.png')} size={25} />
          ),
        }}
      />
    </Tab.Navigator>
  );
};

const Router = () => {
  const {token, setToken} = useContext(TokenContext);
  const {userFav, addFav, getFav} = useContext(UserContext);
  const [isLoading, setLoading] = useState(true);
  useEffect(() => {
    setLoading(false);
    setTimeout(() => {}, 1000);
  }, []);


  return (
    <NavigationContainer>
      {token ? (
        <Stack.Navigator
          initialRouteName="Home"
          screenOptions={{
            headerTransparent: true,
            noBorder: true,
          }}
          headerMode="float">
          <Stack.Screen name={' '} component={HomeTabNavigator} />
          <Stack.Screen name={'Concerts'} component={ConcertsScreen} />
          <Stack.Screen name={'User Profile'} component={ProfileScreen} />
          <Stack.Screen
            name={'FavouritesScreen'}
            component={FavouritesScreen}
          />
          <Stack.Screen name={'Docs'} component={DocumentiesScreen} />
          <Stack.Screen name={'AccountScreen'} component={AccountScreen} />
          <Stack.Screen name={'Home of'} component={SearchScreen} />
          <Stack.Screen name={'Artist'} component={ArtistScreen} />
          <Stack.Screen name={'Title'} component={Videos} />

          <Stack.Screen name={'PlayVideo'} component={PlayVideo} />
        </Stack.Navigator>
      ) : (
        <LoginScreen />
      )}
    </NavigationContainer>
  );
};

Answer 1

您需要将所有堆栈屏幕嵌套在标签屏幕中。

BottomTabNavigator 消失，因为您离开了 Tab.Navigator 组件。