React Native + Expo Router 50.0.15：底部Tab图标默认尺寸及修改咨询

默认值来源 #

• 你在tabBarIcon回调中拿到的size参数，是由@react-navigation/bottom-tabs组件内置提供的默认值，在Expo Router 50.0.15对应的版本中，这个默认尺寸为24。
• 另外MaterialCommunityIcons组件本身的默认size也是24，但因为这里我们使用了导航组件传递的size参数，所以优先级高于图标组件自身的默认值。

修改图标尺寸的两种方式 #

1. 全局统一修改所有Tab图标 #

在Tab.Navigator的配置中，通过以下两种方式实现全局统一调整：

方式一：直接覆盖全局图标尺寸

<Tab.Navigator
  initialRouteName="Feed"
  screenOptions={{
    tabBarActiveTintColor: 'red',
    tabBarInactiveTintColor: 'green',
    // 全局自定义图标尺寸
    tabBarIcon: ({ color, size }) => {
      const customSize = 30;
      // 可根据路由名称返回对应图标，或留空让每个Screen单独定义
    },
  }}
>
  {/* 各个Tab.Screen */}
</Tab.Navigator>

方式二：调整图标容器尺寸

如果需要通过容器间接影响图标显示大小，可配置iconStyle：

<Tab.Navigator
  initialRouteName="Feed"
  tabBarOptions={{
    activeTintColor: 'red',
    inactiveTintColor: 'green',
    iconStyle: {
      width: 30,
      height: 30,
    },
  }}
>
  {/* 各个Tab.Screen */}
</Tab.Navigator>

2. 单个Tab单独修改 #

直接在对应Tab.Screen的tabBarIcon回调中，设置固定尺寸：

<Tab.Screen
  name="Feed"
  component={Feed}
  options={{
    tabBarLabel: 'Home',
    tabBarIcon: ({ color }) => (
      // 自定义单个Tab的图标尺寸为30
      <MaterialCommunityIcons name="home" color={color} size={30} />
    ),
  }}
/>

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