React Navigation MaterialTopTabNavigator - 指示器没有遵循自定义标签栏宽度答案

【问题标题】：React Navigation MaterialTopTabNavigator - indicator did not follow custom tab bar widthReact Navigation MaterialTopTabNavigator - 指示器没有遵循自定义标签栏宽度
【发布时间】：2019-07-03 00:33:19
【问题描述】：

我尝试自定义标签栏的宽度。我设法成功地这样做了，但指标仍在消耗整个屏幕宽度。关于如何更改指示器宽度以跟随标签宽度的任何想法？我知道我可以完全自定义标签栏，但是还有其他方法吗？

这是当前的行为。

这是我的配置

const PersonalInfoTabs = createMaterialTopTabNavigator(
  {
    PersonalData: {
      screen: PersonalData,
      navigationOptions: {
        title: 'A'
      }
    },
    AccountSet: {
      screen: AccountSet,
      navigationOptions: {
        title: 'B'
      }
    },
    ModifyPassword: {
      screen: ModifyPassword,
      navigationOptions: {
        title: 'C'
      }
    }
  },
  {
    tabBarOptions: {
      activeTintColor: 'black',
      inactiveTintColor: 'black',
      style: {
        backgroundColor: 'yellow',
        width: 300
      }
    }
  }
);

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

从documentation for React Navigation for React-Native 看来，您还必须在tabStyle 字段中设置选项卡的样式：

{
  tabBarOptions: {
    activeTintColor: 'black',
    inactiveTintColor: 'black',
    style: {
      backgroundColor: 'yellow',
      width: 300
    },
    tabStyle: {
      width: 100
    }
  }
}

感谢@ValdaXD 指出 100 的宽度。

【讨论】：

我认为应该是 width:100

【解决方案2】：

<Tab.Navigator
  screenOptions={{
    tabBarLabelStyle: { fontSize: 12 },
    tabBarItemStyle: { width: 100 },
    tabBarStyle: { backgroundColor: 'powderblue' },
  }}
>
  {/* ... */}
</Tab.Navigator>

tabBarItemStyle 帮了我大忙

【讨论】：