Реагируйте на содержимое заголовка центра навигации и добавьте вертикальное заполнение

Question

Использование следующих пакетов и версии: реагировать-навигация: 4, реагировать: 16.9.0, реагировать-нативно: https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz,

У меня проблемы с вертикальным центрированием содержимое в моем заголовке, а также добавление дополнительных вертикальных отступов в моем заголовке. Мой заголовок выглядит примерно так:

Вы можете видеть, что в симуляторе (iPhone X), ​​кажется, есть дополнительные отступы над заглавие. Аналогично в симуляторе iPhone 8:

Мой код для навигации в настоящее время выглядит следующим образом:

const somePageStackNavigator = createStackNavigator({
  my_page: {
    screen: SomeComponent,
  },
  ...
}, {
  defaultNavigationOptions: {
    headerLeft: () => (<View><Text>Left</Text></View>),
    headerRight: () => (<View><Text>Right</Text></View>),
    headerStyle: {
      // ... padding, margin, flex, etc. don't work
    }
  },
});

Answer 1

Попробуйте установить marginBottom в headerTitleContainerStyle

Вот пример кода:

createStackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      headerStyle: {},
      headerTitleAlign: 'center',
      headerTitleStyle: {},
      headerTitleContainerStyle: {
        marginBottom: 10,
      },
    },
  },
}