React Native 始终显示底部选项卡导航

y0u0uwnf  于 2023-02-05  发布在  React
关注(0)|答案(2)|浏览(191)

如何显示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>
  );
};
kxeu7u2r

kxeu7u2r1#

您需要将所有堆栈屏幕嵌套在一个选项卡屏幕中
BottomTabNavigator消失,因为您保留了选项卡导航器组件

zqdjd7g9

zqdjd7g92#

我希望这能有所帮助。如果你想在与某个标签按钮相关的屏幕之间导航,并且在这些屏幕之间移动时让该标签按钮保持活动状态,那么你应该在该标签的组件中设置一个StackNavigation。通过这样做,标签按钮在其相关屏幕中导航时将保持活动状态。
另一方面,如果希望TabNavigation在整个应用程序中可见,但某些屏幕不应显示为选项卡,则可以在TabNavigation中添加所有屏幕,并在选项中指定这些屏幕不显示为选项卡按钮。这样,在没有选项卡按钮的屏幕中,选项卡仍将可见,但没有一个选项卡处于活动状态。例如,您可以对名为“标题”的屏幕执行此操作:

<Tab.Screen
name={'Title'}
component={Videos}
options={{
tabBarIcon: ({tintColor}) => (
<Image source={require('../../assets/icons/user.png')} size={25} />
),
tabBarButton: () => null   <---- *this causes it to have no button*
}}
/>

希望这能有所帮助!

相关问题