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

Из документации для React Navigation для React-Native похоже, что вам также необходимо установить стиль для вкладок в поле tabStyle:

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

Спасибона @ValdaXD, чтобы указать ширину 100.