Заголовок заголовка не остается по центру, когда присутствует кнопка «Назад», React Native для Android, React Navigation

Question

Итак, я использую React Navigation 3.0 и React Native.При использовании заголовков заголовок заголовка по умолчанию центрируется в iOS, но он выравнивается по левому краю в Android.Я использовал исправление для центрирования заголовка заголовка для Android, и это нормально.Когда отображается кнопка «Назад», заголовок заголовка затем немного сдвигается вправо.Я ожидал, что заголовок останется центрированным в любом случае.

Поэтому я попытался придать HeaderLeftContainerStyle абсолютный стиль, чтобы он не влиял на положение заголовка, но он не работает должным образом.

Любые рекомендации?

Вот как выглядит код:

const MainCommsStack = createStackNavigator(
  {
    ShowMessages: {
      screen: connect(
        mapStateToProps,
        mapDispatchToProps,
      )(MessageScreen),
    },
    ChatWindow: DetailStack,
  },
  {
    defaultNavigationOptions: {
      headerTitle: 'COMMS',
      headerTitleStyle: [
        baseStyles.whiteHeaderText,
        {
          alignSelf: 'center',
          textAlign: 'center',
          justifyContent: 'center',
          flex: 1,
          textAlignVertical: 'center',
        },
      ],
      headerStyle: {
        backgroundColor: colors.vGreen,
      },
      headerBackImage: <BackButton />,
      headerBackTitle: null,
      headerLeftContainerStyle: {
        position: 'absolute',
        left: 10,
      },
      headerLayoutPreset: 'center',
    },
  },
);
const CommsStack = createAppContainer(MainCommsStack);

Снимки экрана: Нет кнопки «Назад», по центру:)

Теперь с кнопкой «Назад», не по центру: (

Answer 1

Если у вас есть кнопка «Назад» слева и центрированный заголовок, просто добавьте пустой вид справа:

{
  headerTitle: 'COMMS',
  headerRight: <View/>,
}

Answer 2

В файле Header.js, используемом React Navigation, я нашел следующие строки кода:

// These can be adjusted by using headerTitleContainerStyle on navigationOptions
const TITLE_OFFSET_CENTER_ALIGN = Platform.OS === 'ios' ? 70 : 56;
const TITLE_OFFSET_LEFT_ALIGN = Platform.OS === 'ios' ? 20 : 56;

Я изменил TITLE_OFFSET_LEFT_ALIGN на 0 и получил то, что хотел.Также в комментарии упоминается, что если вы можете использовать headerTitleContainerStyle, чтобы манипулировать им.Итак, в моем коде я сделал это:

defaultNavigationOptions: {
      headerTitle: 'COMMS',
      headerTitleStyle: [
        baseStyles.whiteHeaderText,
        {
          flex: 1,
          textAlign: 'center',
        },
      ],
      headerStyle: {
        backgroundColor: colors.vinderGreen,
      },
      headerBackImage: <BackButton />,
      headerBackTitle: null,
      headerTitleContainerStyle: {
        left: 0, // THIS RIGHT HERE
      },
      headerLayoutPreset: 'center',
    },

и все это хорошо: D