如何在react native中单独调整材料顶部标签宽度

7bsow1i6 于 2023-04-07 发布在 React

关注(0)|答案(1)|浏览(159)

我的目标是复制WhatsApp的用户界面。然而，我有麻烦使相机图标较小，同时保持其他行方向弯曲。下面是代码

<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的文档中，它说它会更改单个样式，但这不是我所经历的。当我单击相机图标时，我得到以下信息：

当我点击其他选项卡时：

我不能单独改变标签的样式，我尝试了很多不同的变化。我错过了什么？提前感谢。

react-native

来源：https://stackoverflow.com/questions/73495285/how-to-adjust-material-top-tabs-width-individually-in-react-native

1条答案

按热度按时间

pcrecxhr1#

我可以重现同样的问题。似乎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}
  />

注意事项：

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

否则，创建自定义标签栏可以给予最好的结果，如注解中所述。

赞(0）回复(0）举报 2023-04-07

我来回答

如何在react native中单独调整材料顶部标签宽度

1条答案

相关问题

热门标签

最新问答