React-Native React-Navigation - Использование createDrawerNavigator () не отображает заголовок компонента

Question

Я пытаюсь реализовать заголовки для компонентов с помощью навигатора ящика реагирующей навигации, но использование метода createDrawerNavigator () приводит к полному удалению заголовка.

Использование официальной реакции-навигации v3 'просто-header-button 'snack (в https://snack.expo.io/@react-navigation/simple-header-button-v3), метод createStackNavigator () прекрасно отображает заголовок, но просто изменяя createStackNavigator () на createDrawerNavigator (), удаляет его.

Не полезно, что документация не имеет'Он был изменен с версии 2, чтобы отразить любые потенциальные изменения, которые могут потребоваться, что может быть причиной этого, но ясно, что метод применения заголовков не совпадает между двумя навигационными подходами.

(Не включены мои собственныекод, потому что официальная закуска демонстрирует эту проблему).

Answer 1

Если вы хотите добавить в свой ящик headerNavigator в stackNavigator или что-либо в целом, самый простой способ реализовать заголовки и настроить их - использовать компонент Header с помощью реагировать-нативные элементы

Просто добавьте компонент к каждому экрану, на котором вы хотите заголовок.Затем вы добавляете header:null к вашему stackNavigator, потому что в противном случае будут показаны два заголовка.

Пример ниже:

<React.Fragment>
  <Header
    statusBarProps={{ barStyle: 'light-content' }}
    barStyle="light-content"
    leftComponent={
      <SimpleIcon
        name="menu"
        color="#34495e"
        size={20}
      />
    }
    centerComponent={{ text: 'HOME', style: { color: '#34495e' } }}
    containerStyle={{
      backgroundColor: 'white',
      justifyContent: 'space-around',
    }}
  />
</React.Fragment>