减少宽度：我想减少 2 个选项卡之间的空间答案

【问题标题】：Reduce Width: I want to reduce space between 2 tabs减少宽度：我想减少 2 个选项卡之间的空间
【发布时间】：2020-09-29 07:45:44
【问题描述】：

我正在创建一个反应原生项目。在那个项目中，我创建了选项卡导航器，但是一个选项卡占用了太多空间，我该如何减少它？

<Tab.Navigator
  initialRouteName="Home"
  tabBarOptions={{
    style: { backgroundColor: "#25D366" },
    activeTintColor: colors.white,
    labelStyle: { fontWeight: "bold", fontSize: 15 },
    indicatorStyle: { backgroundColor: colors.white },
    showIcon: true,
  }}
>
  <Tab.Screen
    name="Camera"
    component={Pic}
    options={{
      tabBarLabel: () => null,
      tabBarIcon: ({ size, color }) => (
        <MaterialCommunityIcons name="camera" color={color} size={23} />
      ),
    }}
  />
  <Tab.Screen name="Home" component={Home} />
  <Tab.Screen name="Status" component={Story} />
  <Tab.Screen name="Calls" component={Call} />
</Tab.Navigator>

任何人都可以建议我一种方法吗？

【问题讨论】：

标签： reactjs react-native expo react-navigation

【解决方案1】：

如果您只是希望它们的大小相同，可以尝试在选项卡的样式上设置flexBasis: 1。

【讨论】：

我只想换相机
您能提供更多信息吗？相机标签是不是太大了？如果是这样，您为什么不直接减小它的大小？
好相机标签只包含图标，所以相机和主页标签之间有很多空间，我想减少那个空间，只有那个空间
还是不太明白你的意思。或许发个截图？从您所说的来看，这听起来像是相机图标的样式与其他选项卡不同的问题。
哦，这很正常，标签大小相同，而且相机图标没有其他标签上的标签那么宽。您可以尝试通过样式来减小相机标签的宽度，但老实说，它对我来说看起来非常好。

【解决方案2】：

如果你想改变标签栏的宽度，你必须使用样式覆盖默认的样式道具，如下例所示，

<Tab.Screen name="Home" component={Home} style={{width:100px}} />

【讨论】：

Tab 屏幕中的样式道具建议是什么
tabBarIcon、tabBarLabel、tabBarTestId、tabBarAccessibilityLabel 和标题