如何在 React Native 中单独调整材料顶部标签的宽度

Question

我的目标是复制 WhatsApp UI。但是，我无法在让其他图标沿行方向弯曲的同时缩小相机图标。下面是代码

<Tab.Navigator
  screenOptions={{
    tabBarPosition: 'top',
    tabBarIndicatorStyle: {
      backgroundColor: colors.text,
      height: 4,
    },
    tabBarStyle: {
      backgroundColor: colors.foreground,
    },
    tabBarContentContainerStyle: {
      flexDirection: 'row',
      flex: 1,
      justifyContent: 'space-between',
      // alignItems: 'center',
    },
    tabBarLabelStyle: {
      fontWeight: '600',
    },
    tabBarActiveTintColor: colors.text,
    tabBarInactiveTintColor: colors.secondaryText,
  }}
  initialRouteName="chats">
  <Tab.Screen
    name="Camera"
    component={Camera}
    options={{
      tabBarIcon: ({ color }) => (
        <AntDesign name="camera" size={24} color={color} />
      ),
      tabBarLabel: () => null,
      tabBarItemStyle: { width: 50 },
      tabBarIconStyle: { width: 75 },
    }}
  />
  <Tab.Screen
    name="Chats"
    component={Chats}
  />
  <Tab.Screen
    name="Status"
    component={Status}
  />
  <Tab.Screen
    name="Calls"
    component={Calls}
  />
</Tab.Navigator>

在弄乱 tabBarItemStyle 的宽度后，我注意到在单击时，它也会更改其他选项卡的宽度。在 tabBarItemStyle 的文档中，它说它改变了个人样式，但这不是我所经历的。单击相机图标时，我得到以下信息：

当我单击其他选项卡时：

我无法单独更改选项卡的样式，我尝试了很多不同的变体。我错过了什么？提前致谢。

Answer 1

我可以重现同样的问题。似乎

tabBarItemStyle

在所有选项卡项之间共享。这可能是由于默认标签栏组件的限制。

也许在文档中，

Style object for the individual tab items

可以解释为

for each tab item

我能想到的最好的方法是保持项目样式不变，单独设置

tabBarLabelStyle

。

  <Tab.Screen
    name="Camera"
    component={Camera}
    options={{
      tabBarIcon: ({ color }) => (
        <AntDesign name="camera" size={24} color={color} />
      ),
      tabBarLabel: () => null,
      // use margin to move the icon
      tabBarIconStyle: { marginRight: '60%', width: 50 },
      tabBarIndicatorStyle: { width: 50 }
    }}
  />
  <Tab.Screen
    name="Chats"
    component={Chats}
  />
  <Tab.Screen
    name="Status"
    component={Status}
  />
  <Tab.Screen
    name="Calls"
    component={Calls}
  />

警告：

• 从相机移动到其他选项卡时，指示器没有流畅的动画

否则创建自定义标签栏可以得到最好的结果，如评论中所述。