在标题选项中使用 UIKitten 图标反应导航 5答案

【问题标题】：Using UIKitten Icon in Header options react navigation 5在标题选项中使用 UIKitten 图标反应导航 5
【发布时间】：2020-08-22 17:41:54
【问题描述】：

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

这是我的代码：

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

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

为什么会这样？

【问题讨论】：

标签： react-navigation react-native-ui-kitten

【解决方案1】：

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

有标题：

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

无标题：

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

【讨论】：