底部Tab导航栏图标无法显示，请求解决及错误排查

错误点 #

你在每个<Tab.Screen>的options里自定义了tabBarButton，但这个自定义的TouchableOpacity只处理了 onPress 逻辑，没有渲染tabBarIcon组件。默认的tabBarButton会自动包含screenOptions中定义的tabBarIcon，但自定义后需要手动把图标和相关内容传入，否则图标不会显示。

另外，你自定义tabBarButton里的onPress逻辑是冗余的——默认的tabBarButton已经自带切换路由的功能，不需要手动调用navigation.navigate。

修复后的代码 #

方案1：移除自定义tabBarButton（推荐） #

这是最简单的方式，让Tab导航栏使用默认按钮组件，自动渲染screenOptions里定义的图标：

return (
    <Tab.Navigator initialRouteName='Main' 
        screenOptions = {
            ({ route }) => ({
                tabBarIcon: ({ focused, color, size }) => {
                  let iconName;
      
                  if (route.name === 'Main') {
                    iconName = focused ? 'md-home' : 'md-home-outline';
                  } 
                  else if (route.name === 'Team') {
                    iconName = focused ? 'md-people' : 'md-people-outline';
                  }
                  return <Ionicons name={iconName} size={size} color={color} />;
                },
                tabBarActiveTintColor: 'tomato',
                tabBarInactiveTintColor: 'gray',
                tabBarShowLabel: false, 
              })
        }>
            <Tab.Screen 
            name="Main" component={Main} 
            options={{
                headerShown: false,
            }} 
            />
            <Tab.Screen 
            name="Team" component={Team} 
            options={{}} 
            />
            
          </Tab.Navigator>
  );

方案2：自定义tabBarButton时手动渲染图标 #

如果必须自定义按钮容器，需要在TouchableOpacity中渲染tabBarIcon，可以通过参数获取图标相关配置：

return (
    <Tab.Navigator initialRouteName='Main' 
        screenOptions = {
            ({ route }) => ({
                tabBarIcon: ({ focused, color, size }) => {
                  let iconName;
      
                  if (route.name === 'Main') {
                    iconName = focused ? 'md-home' : 'md-home-outline';
                  } 
                  else if (route.name === 'Team') {
                    iconName = focused ? 'md-people' : 'md-people-outline';
                  }
                  return <Ionicons name={iconName} size={size} color={color} />;
                },
                tabBarActiveTintColor: 'tomato',
                tabBarInactiveTintColor: 'gray',
                tabBarShowLabel: false, 
              })
        }>
            <Tab.Screen 
            name="Main" component={Main} 
            options={({ route, navigation }) => ({
                headerShown: false,
                tabBarButton: ({ focused, color, size }) => {
                    let iconName = focused ? 'md-home' : 'md-home-outline';
                    return (
                        <TouchableOpacity 
                            onPress={() => navigation.navigate('Main')}
                            style={{alignItems: 'center'}}
                        >
                            <Ionicons name={iconName} size={size} color={color} />
                        </TouchableOpacity>
                    );
                }
            })} 
            />
            <Tab.Screen 
            name="Team" component={Team} 
            options={({ route, navigation }) => ({
                tabBarButton: ({ focused, color, size }) => {
                    let iconName = focused ? 'md-people' : 'md-people-outline';
                    return (
                        <TouchableOpacity 
                            onPress={() => navigation.navigate('Team')}
                            style={{alignItems: 'center'}}
                        >
                            <Ionicons name={iconName} size={size} color={color} />
                        </TouchableOpacity>
                    );
                }
            })} 
            />
            
          </Tab.Navigator>
  );

额外检查项 #

• 确认已正确安装并导入Ionicons组件：Expo项目用import Ionicons from '@expo/vector-icons/Ionicons';，裸React Native项目用import Ionicons from 'react-native-vector-icons/Ionicons';（需额外安装依赖）
• 检查图标名称是否正确，确认md-home、md-home-outline等图标在你使用的Ionicons版本中存在

内容的提问来源于stack exchange，提问作者Vivek R K