javascript - 如何在 React Native 中删除某个屏幕上的底部任务栏？

Question

我已经使用 react-native-gifted-chat 在我的应用程序中添加了聊天功能，我想删除特定聊天屏幕上的任务栏 (tabBar)，以提供更多空间和更好的用户体验。

这发生在 iOS 和 Android 上

但我无法隐藏它，尽管尝试了不同的方法:

• 添加tabBarVisible: false,

• 我已经添加了我的函数

  const getTabBarVisibility = (route) => { const routeName = 路由.state ？ route.state.routes [route.state.index] .name : '';

   if (routeName === 'Chat') {
     return false
   }
   return true
  

• 我添加了 react 导航选项: ( https://github.com/react-navigation/react-navigation/issues/7677 )

  const getTabBarVisible = (路线) => { const routeName = 路由.state ？ route.state.routes [route.state.index] .name : 路由参数？ .屏幕 || '家';

   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

截图

Answer 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)},
    })
/>