如何在 Android 和 iOS 设备上以类似方式对齐选项卡栏？

Question

我正在使用 expo-router 的选项卡为我的应用程序创建导航栏，但我注意到 iOS 和 Android 上的导航栏外观存在很大差异。在 Android 上，图标不够大，并且图标与其标签之间存在很大差距。我想让 Android 导航栏看起来与 iOS 设备上的导航栏类似。

这是我到目前为止所拥有的：

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;

我还使用react-native-responsive-screen来解决屏幕尺寸的差异。

Answer 1

在

tabBarIcon

属性上，您可以使图标样式变得非常精细。此外，由于

expo-router

是构建在

react-navigation

之上的，如果您访问 React Navigation 文档，您会发现更多可供选择的选项，直到找到最适合您需求的组合。