React Native中createBottomTabNavigator隐藏图标失败问题求助

我想移除Bottom Tab Navigator中的图标，尝试用tabBarShowIcon属性设置true或false都无效，编辑器还提示该属性不存在，请问哪里出错了？

依赖版本 #

"dependencies": {
  "@react-navigation/bottom-tabs": "^6.5.7",
  "@react-navigation/native": "^6.1.6",
  "cheerio": "^1.0.0-rc.12",
  "react": "18.2.0",
  "react-native": "0.71.6",
  "react-native-paper": "^5.7.0",
  "react-native-safe-area-context": "^4.5.1",
  "react-native-screens": "^3.20.0",
  "react-native-super-grid": "^5.0.0",
  "react-native-webview": "^12.0.2"
}

代码示例 #

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        initialRouteName="Home"
        screenOptions={{
          tabBarShowIcon: false,// true
        }}>
        <Tab.Screen
          name="Home"
          children={(navigation) => <HomeScreen navigation={navigation} type={0} />}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

解决方法 #

• React Navigation 6.x版本已经移除了tabBarShowIcon属性，所以你设置这个属性会无效，编辑器也会提示属性不存在。
• 要隐藏底部导航的图标，有两种实用方式：
  1. 全局隐藏所有屏幕的图标：在Tab.Navigator的screenOptions中，将tabBarIcon设置为返回null的函数：

     <Tab.Navigator
       initialRouteName="Home"
       screenOptions={{
         tabBarIcon: () => null, // 返回null即可隐藏所有图标
       }}>
       <Tab.Screen
         name="Home"
         children={(navigation) => <HomeScreen navigation={navigation} type={0} />}
       />
     </Tab.Navigator>
     

  2. 单独隐藏某个屏幕的图标：在目标Tab.Screen的options里配置tabBarIcon为null：

     <Tab.Screen
       name="Home"
       children={(navigation) => <HomeScreen navigation={navigation} type={0} />}
       options={{
         tabBarIcon: () => null
       }}
     />
     

内容的提问来源于stack exchange，提问作者Paul