如何在 React Native 中删除某个屏幕上的底部任务栏？
Posted
技术标签:
【中文标题】如何在 React Native 中删除某个屏幕上的底部任务栏？【英文标题】：How to remove bottom taskbar on a certain screen in React Native? 【发布时间】：2021-12-16 00:20:12 【问题描述】：我已经使用 react-native-gifted-chat 在我的应用中添加了一个聊天，我想删除特定聊天屏幕上的任务栏 (tabBar)，以提供更多空间和更好的用户体验。
但我无法隐藏它，尽管尝试了不同的方法来做到这一点：
添加tabBarVisible: false,
我已经添加了我的功能
const getTabBarVisibility = (路由) => const routeName = route.state ? route.state.routes [route.state.index] .name : '';
if (routeName === 'Chat')
return false
return true
我添加了反应导航选项： (https://github.com/react-navigation/react-navigation/issues/7677)
const getTabBarVisible = (路由) => const routeName = route.state ? route.state.routes [route.state.index] .name : 路由参数？ .screen || '家';
if (routeName === 'Details')
return false;
return true;
但我无法让 tabBar 隐藏在这个屏幕上。
我展示了屏幕截图和我尝试解决此问题的代码：
const MessageStack = ( navigation ) => (
<Stack.Navigator>
<Stack.Screen name="Messages" component=MensajeScreen />
<Stack.Screen
name="Chat"
component=ChatScreen
options=( route ) => (
//tabBarVisible: route.state && route.state.index === 0,
title: route.params.userName,
headerBackTitleVisible: false,
//tabBarVisible:false
)
/>
</Stack.Navigator>
)
const ProfileStack = ( navigation ) => (
<Stack.Navigator>
<Stack.Screen
name="Profile"
component=ProfileScreen
options=
headerShown: false,
/>
</Stack.Navigator>
)
const AppStack = () =>
const getTabBarVisible = (route) =>
const routeName = route.state
? route.state.routes[route.state.index].name
: route.params?.screen || 'Home';
if (routeName === 'Details')
return false;
return true;
return (
<Tab.Navigator
screenOptions=
activeTintColor: '#2e64e5'
>
<Tab.Screen
name="Home"
component=FeedStack
options=( route ) => (
tabBarLabel: 'Home',
headerShown: false,
tabBarVisible: route.state && route.state.index === 0,
tabBarIcon: ( color, size ) => (
<MaterialCommunityIcons
name="home-outline"
color=color
size=size
/>
),
)
/>
<Tab.Screen
name="Messages"
component=MessageStack
options=( route ) => (
tabBarVisible: getTabBarVisible(route),
//tabBarVisible:false,
//tabBarVisible: getTabBarVisibility(route),
tabBarVisible: route.state && route.state.index === 0,
headerShown: false,
tabBarIcon: ( color, size ) => (
<Ionicons
name="chatbox-ellipses-outline"
color=color
size=size
/>
),
)
/>
<Tab.Screen
name="Profile"
component=ProfileStack
options=
headerShown: false,
tabBarIcon: ( color, size ) => (
<Ionicons name="person-outline" color=color size=size />
),
/>
</Tab.Navigator>
)
export default AppStack
///////////////////////////////////////
<Stack.Screen
name="HomeProfile"
component=ProfileScreen
options=
headerTitleAlign: 'center',
headerStyle:
backgroundColor: '#fff',
shadowColor: '#fff',
elevation: 0,
,
headerBackTitleVisible: false,
headerBackImage: () => (
<View style= marginLeft: 15 >
<Ionicons name="arrow-back" size=25 color="#2e64e5" />
</View>
),
/>
</Stack.Navigator>
);
const MessageStack = ( navigation ) => (
<Stack.Navigator>
<Stack.Screen name="Messages" component=MensajeScreen />
<Stack.Screen
name="Chat"
component=ChatScreen
options=( route ) => (
//tabBarVisible: route.state && route.state.index === 0,
title: route.params.userName,
headerBackTitleVisible: false,
//tabBarVisible:false
)
/>
</Stack.Navigator>
)
const ProfileStack = ( navigation ) => (
<Stack.Navigator>
<Stack.Screen
name="Profile"
component=ProfileScreen
options=
headerShown: false,
/>
</Stack.Navigator>
)
const AppStack = () =>
const getTabBarVisibility = (route) =>
const routeName = route.state
? route.state.routes[route.state.index].name
: '';
if (routeName === 'Chat')
return false
return true
return (
<Tab.Navigator
screenOptions=
activeTintColor: '#2e64e5'
>
<Tab.Screen
name="Home"
component=FeedStack
options=( route ) => (
tabBarLabel: 'Home',
headerShown: false,
// tabBarVisible: route.state && route.state.index === 0,
tabBarIcon: ( color, size ) => (
<MaterialCommunityIcons
name="home-outline"
color=color
size=size
/>
),
)
/>
<Tab.Screen
name="Messages"
component=MessageStack
options=( route ) => (
tabBarVisible: getTabBarVisible(route),
//tabBarVisible:false,
tabBarVisible: getTabBarVisibility(route),
//tabBarVisible: route.state && route.state.index === 0,
headerShown: false,
tabBarIcon: ( color, size ) => (
<Ionicons
name="chatbox-ellipses-outline"
color=color
size=size
/>
),
)
/>
<Tab.Screen
name="Profile"
component=ProfileStack
options=
headerShown: false,
// tabBarLabel: 'Home',
tabBarIcon: ( color, size ) => (
<Ionicons name="person-outline" color=color size=size />
),
/>
</Tab.Navigator>
)
export default AppStack
//////////////////////////////
我添加了更多代码
import React from 'react'
import View, TouchableOpacity, Text from 'react-native'
import createStackNavigator from '@react-navigation/stack'
import createBottomTabNavigator from '@react-navigation/bottom-tabs'
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
import Ionicons from 'react-native-vector-icons/Ionicons'
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5'
import HomeScreen from '../screens/HomeSreen'
import ChatScreen from '../screens/ChatScreen'
import ProfileScreen from '../screens/ProfileScreen'
import AddPostScreen from '../screens/AddPostScreen'
import MensajeScreen from '../screens/MensajeScreen'
import EditarPerfilScreen from '../screens/EditarPerfilScreen'
const Stack = createStackNavigator()
const Tab = createBottomTabNavigator()
const FeedStack = ( navigation ) => (
<Stack.Navigator>
<Stack.Screen
name="Vinkylim Network"
component=HomeScreen
options=
headerTitleAlign: 'center',
headerTitleStyle:
color: '#2e64e5',
fontFamily: 'Kufam-SemiBoldItalic',
fontSize: 18,
,
headerStyle:
shadowColor: '#fff',
elevation: 0,
,
headerRight: () => (
<View style= marginRight: 10 >
<FontAwesome5.Button
name="plus"
size=22
backgroundColor="#fff"
color="#2e64e5"
onPress=() => navigation.navigate('AddPost')
/>
</View>
),
/>
<Stack.Screen
name="AddPost"
component=AddPostScreen
options=
headerTitleAlign: 'center',
headerStyle:
backgroundColor: '#2e64e515',
shadowColor: '#2e64e515',
elevation: 0,
,
headerBackTitleVisible: false,
headerBackImage: () => (
<View style= marginLeft: 15 >
<Ionicons name="arrow-back" size=25 color="#2e64e5" />
</View>
),
/>
<Stack.Screen
name="HomeProfile"
component=ProfileScreen
options=
//tabBarVisible:false,
headerTitleAlign: 'center',
headerStyle:
backgroundColor: '#fff',
shadowColor: '#fff',
elevation: 0,
,
headerBackTitleVisible: false,
headerBackImage: () => (
<View style= marginLeft: 15 >
<Ionicons name="arrow-back" size=25 color="#2e64e5" />
</View>
),
/>
</Stack.Navigator>
);
const MessageStack = ( navigation ) => (
<Stack.Navigator>
<Stack.Screen name="Messages" component=MensajeScreen />
<Stack.Screen
name="Chat"
component=ChatScreen
options=( route ) => (
//tabBarVisible: route.state && route.state.index === 0,
title: route.params.userName,
headerBackTitleVisible: false,
//tabBarVisible:false
)
/>
</Stack.Navigator>
)
const ProfileStack = ( navigation ) => (
<Stack.Navigator>
<Stack.Screen
name="Profile"
component=ProfileScreen
options=
headerShown: false,
/>
<Stack.Screen
name="EditProfile"
component=EditarPerfilScreen
options=
headerTitle: 'Edit Profile',
headerBackTitleVisible: false,
headerTitleAlign: 'center',
headerStyle:
backgroundColor: '#fff',
shadowColor: '#fff',
elevation: 0,
,
/>
</Stack.Navigator>
)
const AppStack = () =>
const getTabBarVisibility = (route) =>
const routeName = route.state
? route.state.routes[route.state.index].name
: '';
if (routeName === 'Chat')
return false
return true
/* const getTabBarVisible = (route) =>
const routeName = route.state
? route.state.routes[route.state.index].name
: route.params?.screen || 'Home';
if (routeName === 'Details')
return false;
return true;
*/
return (
<Tab.Navigator
screenOptions=
activeTintColor: '#2e64e5'
>
<Tab.Screen
name="Home"
component=FeedStack
options=( route ) => (
tabBarLabel: 'Home',
headerShown: false,
// tabBarVisible: route.state && route.state.index === 0,
tabBarIcon: ( color, size ) => (
<MaterialCommunityIcons
name="home-outline"
color=color
size=size
/>
),
)
/>
<Tab.Screen
name="Messages"
component=MessageStack
options=( route ) => (
//tabBarVisible: getTabBarVisible(route),
//tabBarVisible:false,
tabBarVisible: getTabBarVisibility(route),
tabBarVisible: route.state && route.state.index === 0,
headerShown: false,
tabBarIcon: ( color, size ) => (
<Ionicons
name="chatbox-ellipses-outline"
color=color
size=size
/>
),
)
/>
<Tab.Screen
name="Profile"
component=ProfileStack
options=
headerShown: false,
// tabBarLabel: 'Home',
tabBarIcon: ( color, size ) => (
<Ionicons name="person-outline" color=color size=size />
),
/>
</Tab.Navigator>
)
export default AppStack
截图
【问题讨论】：
您是否将聊天屏幕嵌套在底部标签导航路径中？如果是这样，从导航堆栈中删除您的屏幕应该可以解决问题。 正如你在代码中看到的那样。有所有聊天屏幕，以及我们进入每个聊天时的屏幕。但这适用于其他人，正如我在示例中看到的那样，但它不适用于我。我将添加整个文件，但这是聊天部分 【参考方案1】：import getFocusedRouteNameFromRoute from '@react-navigation/native';
function getTabVisible(route)
const routeName = getFocusedRouteNameFromRoute(route) ?? 'Chat';
if (routeName === 'Chat')
return 'none';
return 'flex';
<Tab.Screen
options=(route) => (
tabBarStyle: display: getTabVisible(route),
)
/>
【讨论】：
以上是关于如何在 React Native 中删除某个屏幕上的底部任务栏？的主要内容，如果未能解决你的问题，请参考以下文章
如何仅在特定屏幕（例如主屏幕）上启用抽屉导航 [react native] [react navigation]
如何使用搜索文本输入（expo、react-native）在屏幕上显示项目