React Navigation v6自定义底部Tab：动态图标与Props类型问题

一、为每个Tab设置不同的动态图标 #

你已经在每个Tab.Screen的options里定义了tabBarIcon，可以直接在自定义CustomTabBar中复用这个配置，不用硬编码图标路径。

实现方式： #

在CustomTabBar的路由循环中，从descriptors[route.key].options里获取tabBarIcon，传入当前的focused状态和图标尺寸，直接渲染这个图标组件：

// 替换原有的Image组件
{options.tabBarIcon ? options.tabBarIcon({ focused: isFocused, size: 24 }) : null}

如果更倾向于直接传递图片源而非组件，也可以在Tab.Screen的options里自定义字段（比如tabBarIconSource）：

<Tab.Screen
  name="Home"
  component={HomeScreen}
  options={{
    tabBarIconSource: require('../assets/icons/homeIcon.png'),
  }}
/>
<Tab.Screen
  name="News"
  component={NewsScreen}
  options={{
    tabBarIconSource: require('../assets/icons/mapIcon.png'),
  }}
/>

然后在CustomTabBar中读取这个自定义字段：

<Image
  source={options.tabBarIconSource}
  style={{
    width: 24,
    height: 24,
    tintColor: isFocused ? '#2196F3' : '#666',
  }}
/>

二、修复CustomTabBar的TypeScript类型 #

React Navigation v6为底部Tab导航的自定义tabBar组件提供了明确的类型BottomTabBarProps，导入并指定给props即可，无需@ts-ignore。

实现步骤： #

1. 导入类型：

import { createBottomTabNavigator, BottomTabBarProps } from '@react-navigation/bottom-tabs';

2. 为CustomTabBar指定props类型：

function CustomTabBar({ state, descriptors, navigation }: BottomTabBarProps) {
  // ... 原有逻辑
}

完整修改后的代码 #

import React from 'react';
import { Image, TouchableOpacity, View } from 'react-native';
import { createBottomTabNavigator, BottomTabBarProps } from '@react-navigation/bottom-tabs';
import HomeScreen from '../screens/home/HomeScreen';
import NewsScreen from '../screens/news/NewsScreen';

// 自定义TabBar组件，使用正确的TypeScript类型
function CustomTabBar({ state, descriptors, navigation }: BottomTabBarProps) {
  return (
    <View
      style={{
        flexDirection: 'row',
        justifyContent: 'space-around',
        alignItems: 'center',
        backgroundColor: '#2C2C2C',
        height: 100,
        width: '100%',
        borderTopLeftRadius: 60,
        borderTopRightRadius: 60,
        position: 'absolute',
        bottom: 0,
      }}
    >
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const isFocused = state.index === index;

        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
          });

          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name);
          }
        };

        const onLongPress = () => {
          navigation.emit({
            type: 'tabLongPress',
            target: route.key,
          });
        };

        return (
          <TouchableOpacity
            accessibilityRole="button"
            accessibilityState={isFocused ? { selected: true } : {}}
            accessibilityLabel={options.tabBarAccessibilityLabel}
            testID={options.tabBarTestID}
            onPress={onPress}
            onLongPress={onLongPress}
            style={{ padding: 8 }}
            key={route.key}
          >
            {/* 复用每个Tab.Screen定义的tabBarIcon */}
            {options.tabBarIcon ? options.tabBarIcon({ focused: isFocused, size: 24 }) : null}
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      screenOptions={{ headerShown: false }}
      tabBar={props => <CustomTabBar {...props} />}
    >
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarIcon: ({ size, focused }) => (
            <Image
              source={require('../assets/icons/homeIcon.png')}
              style={{ width: size, height: size, tintColor: focused ? '#2196F3' : '#666' }}
            />
          ),
        }}
      />
      <Tab.Screen
        name="News"
        component={NewsScreen}
        options={{
          tabBarIcon: ({ size, focused }) => (
            <Image
              source={require('../assets/icons/mapIcon.png')}
              style={{ width: size, height: size, tintColor: focused ? '#2196F3' : '#666' }}
            />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

export default MyTabs;

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