React Native仿WhatsApp UI：Material Top Tabs单独设宽异常问题

目标效果（WhatsApp界面）：

我想要复刻WhatsApp的顶部Tab 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应该支持单独设置标签样式，但实际切换标签时其他标签宽度会跟着变化，请问问题出在哪里？

问题根源在于tabBarContentContainerStyle中设置的justifyContent: 'space-between'会让Tab项根据可用空间动态调整宽度，加上Material Top Tab Navigator的默认布局逻辑，切换标签时会重新计算所有Tab的宽度分配，导致布局异常。

修改步骤：

1. 移除tabBarContentContainerStyle中的justifyContent: 'space-between'，只保留flexDirection: 'row'和flex: 1，让Tab项按flex规则分配空间。
2. 给相机Tab固定宽度，保持tabBarItemStyle: { width: 50 }。
3. 给其他三个Tab设置tabBarItemStyle: { flex: 1 }，让它们平分剩余的屏幕宽度。

修改后的代码：

<Tab.Navigator
  screenOptions={{
    tabBarPosition: 'top',
    tabBarIndicatorStyle: {
      backgroundColor: colors.text,
      height: 4,
    },
    tabBarStyle: {
      backgroundColor: colors.foreground,
    },
    tabBarContentContainerStyle: {
      flexDirection: 'row',
      flex: 1,
      // 移除justifyContent: 'space-between'
    },
    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 }, // 固定相机Tab宽度
    }}
  />
  <Tab.Screen
    name="Chats"
    component={Chats}
    options={{
      tabBarItemStyle: { flex: 1 }, // 平分剩余空间
    }}
  />
  <Tab.Screen
    name="Status"
    component={Status}
    options={{
      tabBarItemStyle: { flex: 1 }, // 平分剩余空间
    }}
  />
  <Tab.Screen
    name="Calls"
    component={Calls}
    options={{
      tabBarItemStyle: { flex: 1 }, // 平分剩余空间
    }}
  />
</Tab.Navigator>

这样修改后，相机Tab会保持固定的50宽度，其他三个Tab会自动平分屏幕剩余宽度，切换标签时布局不会再发生变化，和WhatsApp的UI一致。

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