Блог

В моем приложении есть навигация по стеку / ящику. Я хотел бы иметь значок меню в моем верхнем заголовке навигации, который позволяет открывать и закрывать меню ящика.

Это мой код:

 import * as React from 'react';
import { useNavigation, DrawerActions } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { TouchableOpacity } from 'react-native';
import {
  Layout,
  Icon,
  Text,
  TopNavigation,
  TopNavigationAction,
} from '@ui-kitten/components';
import DrawerMenu from './DrawerMenu';

const Stack = createStackNavigator();

const MenuIcon = (props) => <Icon name="menu" {...props} />;

const ToggleMenuAction = () => <TopNavigationAction icon={MenuIcon} />;

const MenuButton = () => (
  <TopNavigation accessoryLeft={ToggleMenuAction} title="Eva Application" />
);

const HeaderLeft = () => {
  const navigation = useNavigation();
  return (
    <Layout style={{ flexDirection: 'row' }}>
      <TouchableOpacity
        onPress={() => {
          navigation.dispatch(DrawerActions.toggleDrawer());
        }}
      >
        <MenuButton />
      </TouchableOpacity>
    </Layout>
  );
};

export default function AppStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        options={{
          // eslint-disable-next-line react/display-name
          headerLeft: () => <HeaderLeft />,
        }}
        component={DrawerMenu}
        name="Drawer"
      />
    </Stack.Navigator>
  );
}
  

Я не хочу, чтобы заголовок находился рядом с моей кнопкой заголовка. Что странно, так это то, что когда я удаляю поле заголовка из

 const MenuButton = () => (
  <TopNavigation accessoryLeft={ToggleMenuAction} title="Eva Application" />
);
  

И сделайте это просто

 const MenuButton = () => (
  <TopNavigation accessoryLeft={ToggleMenuAction} />
);
  

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

Почему это должно быть так?

Удаляя заголовок, вы уменьшаете область попадания (область, которая запускает событие onPress).
Вы можете увидеть область, установив цвет фона для осязаемой области.
Кроме того, нажатие на значок меню напрямую не запускает событие onPress, вам нужно щелкнуть по красному пробелу вокруг значка меню, чтобы вызвать его.
Таким образом, тот факт, что вам приходится нажимать несколько раз, скорее всего, сводится к попаданию в нужное место.

С заголовком:

 const MenuButton = () => (
  <TopNavigation accessoryLeft={ToggleMenuAction} title="Eva Application" style={{backgroundColor:'red'}}/>
);
  

Без заголовка:

 const MenuButton = () => (
  <TopNavigation accessoryLeft={ToggleMenuAction} style={{backgroundColor:'red'}}/>
);