我创建了一个带有4个标签导航器屏幕的导航器->主页,搜索,上传和库;而且我有堆栈导航屏幕,例如“注册”,“登录”,“主页”标签和视频。 现在,我想从“上传”屏幕中删除底部的标签栏,但不确定是否可以?
以下是我编写的确切代码:
import React from 'react';
import 'react-native-gesture-handler';
import {StatusBar} from 'react-native';
import {NavigationContainer, DarkTheme} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialIcons';
import Home from '../screens/Home';
import Search from '../screens/Search';
import Library from '../screens/Library';
import ProfileAuthor from '../screens/ProffileAuthor';
import Shoot from '../screens/Shoot';
import LoginScreen from '../screens/LoginScreen';
import SignUp from '../screens/SignUp';
const Stack = createStackNavigator();
const Tab = createMaterialBottomTabNavigator();
function myTabs() {
return (
<Tab.Navigator
initialRouteName="Home"
activeColor="#000"
inactiveColor="#000"
barStyle={{
backgroundColor: '#FFF',
}}>
<Tab.Screen
name="Home"
component={Home}
options={{
title: 'Home',
tabBarLabel: 'Home',
tabBarIcon: ({color}) => (
<MaterialCommunityIcons color={color} name="home" size={26} />
),
}}
/>
<Tab.Screen
name="Search"
component={Search}
options={{
title: 'Search',
tabBarLabel: 'Search',
tabBarIcon: ({color}) => (
<MaterialCommunityIcons color={color} name="search" size={26} />
),
}}
/>
<Tab.Screen
name="Upload"
component={Shoot}
options={{
title: 'Upload',
tabBarLabel: 'Upload',
tabBarIcon: ({color}) => (
<MaterialCommunityIcons color={color} name="add-box" size={26} />
),
}}
/>
<Tab.Screen
name="Library"
component={Library}
options={{
title: 'Library',
tabBarLabel: 'Library',
tabBarIcon: ({color}) => (
<MaterialCommunityIcons
color={color}
name="person-outline"
size={26}
/>
),
}}
/>
</Tab.Navigator>
);
}
const Routes = () => {
return (
<NavigationContainer theme={DarkTheme}>
<Stack.Navigator>
<Stack.Screen
name="login"
component={LoginScreen}
options={{
header: () => null,
}}
/>
<Stack.Screen
name="signup"
component={SignUp}
options={{
header: () => null,
}}
/>
<Stack.Screen
name="Home"
component={myTabs}
options={{
header: () => null,
}}
/>
<Stack.Screen
name="Video"
component={ProfileAuthor}
options={{
header: () => null,
}}
/>
</Stack.Navigator>
</NavigationContainer>
);
};
export default Routes;
有人可以告诉我这种结构是否可行,如果可以,那么如何实现?任何帮助都会很棒。
答案 0 :(得分:1)
tabBarVisible : false
当您使用来自 @ react-navigation / bottom-tabs 的 createBottomTabNavigator 时,此方法可以正常工作。但是如果您将使用 @ react-navigation / material-bottom-tabs 中的 createMaterialBottomTabNavigator 创建底部标签,则无法使用。 createMaterialBottomTabNavigator 无法隐藏标签栏,您可以看到文档中没有此类选项。如果希望底部选项卡导航器在堆栈导航器的其他屏幕上消失,则应尝试将其嵌套在堆栈导航器中。以下代码用于 createBottomTabNavigator 中的“隐藏”标签栏。
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const BottomTabs = createBottomTabNavigator();
<BottomTabs.Navigator>
<BottomTabs.Screen name={AppRoute.MORE} component={MoreStack}
options={({ route }) => ({
tabBarVisible: getTabBarVisibility(route),
tabBarLabel: languages.stack_More
})}
/>
</BottomTabs.Navigator>
const getTabBarVisibility = (route: any) => {
const routeName = route.state ? route.state.routes[route.state.index].name: '';
if (routeName === AppRoute.PROFILE
|| routeName === AppRoute.HELP_CENTER
|| routeName === AppRoute.TERMS_CONDITION) {
return false;
}
return true;
}