将 react-native 中的 tabBar 宽度修复到 Icon 中答案

【问题标题】：Fix tabBar width in react-native into the Icon将 react-native 中的 tabBar 宽度修复到 Icon 中
【发布时间】：2023-01-26 18:50:07
【问题描述】：

我创建的就像一个 whatsapp 的 TabBar，相机图标的宽度比其他图标小很多。我不能将等宽更改为其他三个 tabBar Camera's Width 相机图标的宽度为 50pix，但 Width 与所有四个 TabBar 标题分开 other three TabBar's View

<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>

【问题讨论】：

标签： javascript react-native navigation width tabbar

【解决方案1】：

也许，改变这个；

tabBarIndicatorStyle: {
          flex: 1,
          width: 50,
          left: 10,
        }

对此，

tabBarIndicatorStyle: {
          flex: 1,
          width: '50%',
          left: 10,
        }

并尝试使用这些值，直到您满意为止。

【讨论】：