在 Header 选项中使用 UIKitten 图标反应导航 5

Question

我的应用程序中有一个 stack/drawer 导航。我希望能够在我的顶部 header 导航中有一个菜单图标，用于切换抽屉菜单的打开和关闭。

这是我的代码：

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>
  );
}

我不想在 header 按钮旁边显示标题。奇怪的是，当我从

中删除标题字段时

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

并使其成为

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

切换功能刚刚停止工作。我必须多次单击菜单按钮才能使菜单切换打开和关闭，但是当标题出现时，它可以正常工作。

为什么会这样？

Answer 1

通过删除标题，您可以缩小点击区域（触发 onPress 事件的区域）。
您可以通过为 TouchableOpacity 设置背景颜色来查看该区域。
另外，直接点击菜单图标不会触发onPress事件，需要点击菜单图标周围的红色space才能触发。
因此，您必须多次点击的事实很可能归结为点击正确的位置。

标题为：

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

无标题：

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

在 Header 选项中使用 UIKitten 图标反应导航 5

Using UIKitten Icon in Header options react navigation 5

react-navigation

react-native-ui-kitten