如何让Android与iOS设备上的expo-router Tab栏样式统一？

问题 #

使用expo-router的Tabs组件构建导航栏时，Android端存在图标尺寸偏小、图标与标签间距过大的问题，希望让Android端样式对齐iOS，已使用react-native-responsive-screen做屏幕适配，现有代码如下：

const TabsLayout = () => {
  const iconSize = hp("3%");

  return (
    <>
      <Tabs
        screenOptions={{
          tabBarStyle: {
            height: hp("10%"),
          },
          tabBarLabelStyle: {
            fontSize: hp("1.8%"),
          },
        }}
      >
        <Tabs.Screen
          name="home"
          options={{
            title: "Home",
            headerShown: false,
            tabBarIcon: ({ color }) => (
              <FontAwesome size={iconSize} name="home" color={color} />
            ),
          }}
        />
        <Tabs.Screen
          name="create"
          options={{
            title: "Create",
            headerShown: false,
            tabBarIcon: ({ color }) => (
              <FontAwesome6 name="add" size={iconSize} color={color} />
            ),
          }}
        />
        <Tabs.Screen
          name="profile"
          options={{
            title: "Profile",
            headerShown: false,
            tabBarIcon: ({ color }) => (
              <AntDesign name="profile" size={iconSize} color={color} />
            ),
          }}
        />
      </Tabs>
    </>
  );
};

export default TabsLayout;

解决方案 #

通过Platform模块区分平台，针对Android单独调整TabBar的内边距、图标间距等样式，实现与iOS端的视觉统一：

修改后的完整代码 #

import { Platform } from 'react-native';
import { Tabs } from 'expo-router';
import { hp } from 'react-native-responsive-screen';
import FontAwesome from '@expo/vector-icons/FontAwesome';
import FontAwesome6 from '@expo/vector-icons/FontAwesome6';
import AntDesign from '@expo/vector-icons/AntDesign';

const TabsLayout = () => {
  const iconSize = hp("3%");
  const isAndroid = Platform.OS === 'android';

  return (
    <>
      <Tabs
        screenOptions={{
          tabBarStyle: {
            height: hp("10%"),
            // 针对Android调整上下内边距，缩小整体间距
            paddingVertical: isAndroid ? hp(1%) : hp(2%),
          },
          tabBarLabelStyle: {
            fontSize: hp("1.8%"),
            // Android默认标签间距偏大，缩小标签与图标的距离
            marginTop: isAndroid ? hp(0.5%) : hp(1%),
          },
          // 统一图标容器的样式，消除Android默认的额外间距
          tabBarIconStyle: {
            marginBottom: isAndroid ? hp(0.5%) : 0,
          },
          // 确保每个Tab项的布局一致
          tabBarItemStyle: {
            justifyContent: 'center',
            alignItems: 'center',
          },
        }}
      >
        <Tabs.Screen
          name="home"
          options={{
            title: "Home",
            headerShown: false,
            tabBarIcon: ({ color }) => (
              <FontAwesome size={iconSize} name="home" color={color} />
            ),
          }}
        />
        <Tabs.Screen
          name="create"
          options={{
            title: "Create",
            headerShown: false,
            tabBarIcon: ({ color }) => (
              <FontAwesome6 name="add" size={iconSize} color={color} />
            ),
          }}
        />
        <Tabs.Screen
          name="profile"
          options={{
            title: "Profile",
            headerShown: false,
            tabBarIcon: ({ color }) => (
              <AntDesign name="profile" size={iconSize} color={color} />
            ),
          }}
        />
      </Tabs>
    </>
  );
};

export default TabsLayout;

关键修改说明 #

• 平台区分：使用Platform.OS判断当前设备，针对Android单独调整样式参数
• TabBar内边距：减小Android端的paddingVertical，缩小导航栏整体上下间距
• 图标与标签间距：通过tabBarLabelStyle的marginTop和tabBarIconStyle的marginBottom，让Android端图标与标签的距离和iOS一致
• 布局对齐：通过tabBarItemStyle强制每个Tab项居中布局，确保图标和标签的垂直排列统一

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