反应导航MaterialTopTabNavigator - 指示灯没有按照自定义标签栏宽度

Question

我想自定义标签栏的宽度。我设法成功地做到这一点，但指示灯仍占用屏幕的整个宽度。如何改变指示器宽度遵循标签宽度的任何想法？我知道我可以完全自定义标签栏，但有没有其他办法？

这是当前的行为。

这是我的配置

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
      }
    }
  }
);

Answer 1

从documentation for React Navigation for React-Native，它看起来像你还可以设置样式在tabStyle领域的标签：

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

由于@ValdaXD指出的100的宽度。