如何显示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>
);
};
2条答案
按热度按时间kxeu7u2r1#
您需要将所有堆栈屏幕嵌套在一个选项卡屏幕中。
BottomTabNavigator消失,因为您保留了选项卡导航器组件。
zqdjd7g92#
我希望这能有所帮助。如果你想在与某个标签按钮相关的屏幕之间导航,并且在这些屏幕之间移动时让该标签按钮保持活动状态,那么你应该在该标签的组件中设置一个StackNavigation。通过这样做,标签按钮在其相关屏幕中导航时将保持活动状态。
另一方面,如果希望TabNavigation在整个应用程序中可见,但某些屏幕不应显示为选项卡,则可以在TabNavigation中添加所有屏幕,并在选项中指定这些屏幕不显示为选项卡按钮。这样,在没有选项卡按钮的屏幕中,选项卡仍将可见,但没有一个选项卡处于活动状态。例如,您可以对名为“标题”的屏幕执行此操作:
希望这能有所帮助!