В React Native компонент Drawer Navigation обычно используется для создания навигационного ящика, который выдвигается сбоку экрана. Однако в некоторых случаях вам может потребоваться скрыть заголовок навигации по ящику, чтобы добиться определенного дизайна или пользовательского опыта. В этой статье мы рассмотрим пять различных способов скрыть заголовок панели навигации в React Native, а также приведем примеры кода.

Метод 1: использование параметра «headerShown»

import { createDrawerNavigator } from '@react-navigation/drawer';
const Drawer = createDrawerNavigator();
function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator screenOptions={{ headerShown: false }}>
        {/* Your screens here */}
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

Для параметра headerShownустановлено значение falseв свойстве screenOptionsэлемента Drawer.Navigator. Это скроет заголовок для всех экранов в панели навигации.

Метод 2: настройка компонента содержимого ящика

import { createDrawerNavigator, DrawerContent } from '@react-navigation/drawer';
const Drawer = createDrawerNavigator();
function CustomDrawerContent(props) {
  return (
    <DrawerContent {...props} style={{ paddingTop: 0 }}>
      {/* Your custom drawer content */}
    </DrawerContent>
  );
}
function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator drawerContent={CustomDrawerContent}>
        {/* Your screens here */}
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

Создав собственный компонент содержимого ящика (CustomDrawerContent), вы можете полностью контролировать внешний вид ящика. В этом примере мы устанавливаем для свойства стиля paddingTopзначение 0, чтобы удалить заголовок.

Метод 3: использование пользовательского компонента навигатора

import { createDrawerNavigator, DrawerContentScrollView } from '@react-navigation/drawer';
const Drawer = createDrawerNavigator();
function CustomDrawerNavigator(props) {
  return (
    <DrawerContentScrollView {...props} contentContainerStyle={{ paddingTop: 0 }}>
      {/* Your custom drawer content */}
    </DrawerContentScrollView>
  );
}
function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator drawerContent={CustomDrawerNavigator}>
        {/* Your screens here */}
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

Подобно методу 2, вы можете создать собственный компонент навигатора (CustomDrawerNavigator) и использовать свойство contentContainerStyleдля удаления заголовка.

Метод 4. Управление стилями ящиков

import { createDrawerNavigator } from '@react-navigation/drawer';
const Drawer = createDrawerNavigator();
function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator drawerStyle={{ paddingTop: 0 }}>
        {/* Your screens here */}
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

В этом методе мы напрямую манипулируем стилями ящика, используя свойство drawerStyle. Установив для свойства стиля paddingTopзначение 0, мы можем скрыть заголовок.

Метод 5: использование пользовательских компонентов заголовка

import { createDrawerNavigator, Header } from '@react-navigation/drawer';
const Drawer = createDrawerNavigator();
function CustomHeader() {
  return null;
}
function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator
        screenOptions={{
          header: () => <CustomHeader />,
        }}
      >
        {/* Your screens here */}
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

Создавая собственный компонент заголовка (CustomHeader) и возвращая null, мы можем эффективно скрыть заголовок навигации по панели.

В этой статье мы рассмотрели пять различных способов скрыть заголовок навигации по ящику в React Native. В зависимости от ваших конкретных требований и предпочтений вы можете выбрать наиболее подходящий метод для вашего проекта. Поэкспериментируйте с этими методами и найдите тот, который лучше всего соответствует вашим целям дизайна и удобства использования.