React Native修复TabBar宽度问题：仿WhatsApp相机图标宽度异常

我正在开发仿WhatsApp的顶部TabBar，其中相机图标的Tab项宽度远小于另外三个Tab项，尝试设置50像素宽度但无效——当前四个Tab头部是平均分配宽度的。

代码如下：

<NavigationContainer>
  {/* <Stack.Navigator>
    <Stack.Screen
      options={{
        title: 'WhatsApp',
        headerTintColor: '#8696a0',
        headerStyle: {
          backgroundColor: '#1f2c34',
        },
      }}
      name='main'
      component={SecondaryScreen}
    />
  </Stack.Navigator> */}
  <TopTab.Navigator
    initialRouteName='CHATS'
    screenOptions={{
      tabBarStyle: {
        backgroundColor: '#1f2c34',
      },
      
      tabBarLabelStyle: { fontWeight: '800', fontSize: 14 },
      tabBarActiveTintColor: '#25d366',
      tabBarInactiveTintColor: '#8696a0',
    }}
  >
    <TopTab.Screen
      name='camera'
      component={Camera}
      options={{
        tabBarShowLabel: false,
        tabBarIndicatorStyle: {
          flex: 1,
          width: 50,
          left: 10,
        },
        
        tabBarIconStyle: { width: 50 },
        tabBarIcon: ({ color, size }) => (
          <Feather name='camera' size={22} color={color} />
        ),
      }}
    />
    <TopTab.Screen name='CHATS' component={Chats} />
    <TopTab.Screen name='STATUS' component={Status} />
    <TopTab.Screen name='CALLS' component={Calls} />
  </TopTab.Navigator>
</NavigationContainer>

React Navigation的TopTab.Navigator默认给每个Tab项设置flex: 1，导致宽度平均分配。要实现相机Tab固定宽度、其余三个Tab平分剩余空间的效果，按以下步骤修改：

• 给相机Tab设置固定宽度：在相机Tab的options中添加tabBarItemStyle: { width: 50 }，强制固定其宽度。
• 让其余Tab平分剩余宽度：给CHATS、STATUS、CALLS三个Tab的options分别添加tabBarItemStyle: { flex: 1 }，让它们自动平分相机Tab之外的剩余空间。
• 调整指示器与图标布局：移除指示器的flex: 1属性，调整left值让指示器对齐相机图标；同时给tabBarIconStyle添加居中样式，确保图标在固定宽度内居中显示。

修改后的完整代码：

<NavigationContainer>
  {/* <Stack.Navigator>
    <Stack.Screen
      options={{
        title: 'WhatsApp',
        headerTintColor: '#8696a0',
        headerStyle: {
          backgroundColor: '#1f2c34',
        },
      }}
      name='main'
      component={SecondaryScreen}
    />
  </Stack.Navigator> */}
  <TopTab.Navigator
    initialRouteName='CHATS'
    screenOptions={{
      tabBarStyle: {
        backgroundColor: '#1f2c34',
      },
      
      tabBarLabelStyle: { fontWeight: '800', fontSize: 14 },
      tabBarActiveTintColor: '#25d366',
      tabBarInactiveTintColor: '#8696a0',
    }}
  >
    <TopTab.Screen
      name='camera'
      component={Camera}
      options={{
        tabBarShowLabel: false,
        tabBarIndicatorStyle: {
          width: 50,
          left: 0, // 微调指示器位置，使其对齐相机图标
        },
        tabBarItemStyle: { width: 50 }, // 固定相机Tab宽度
        tabBarIconStyle: { width: '100%', justifyContent: 'center' }, // 图标居中
        tabBarIcon: ({ color, size }) => (
          <Feather name='camera' size={22} color={color} />
        ),
      }}
    />
    <TopTab.Screen 
      name='CHATS' 
      component={Chats} 
      options={{ tabBarItemStyle: { flex: 1 } }}
    />
    <TopTab.Screen 
      name='STATUS' 
      component={Status} 
      options={{ tabBarItemStyle: { flex: 1 } }}
    />
    <TopTab.Screen 
      name='CALLS' 
      component={Calls} 
      options={{ tabBarItemStyle: { flex: 1 } }}
    />
  </TopTab.Navigator>
</NavigationContainer>

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