作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我的应用程序中有一个堆栈/抽屉导航。我希望能够在我的顶部标题导航中有一个菜单图标,用于切换抽屉菜单的打开和关闭。
这是我的代码:
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 事件的区域)变小。
您可以通过为 TouchableOpacity 设置背景颜色来查看该区域。
另外,直接点击菜单图标不会触发onPress事件,需要点击菜单图标周围的红色区域才能触发。
因此,您必须多次点击的事实很可能归结为点击正确的位置。
标题:
const MenuButton = () => (
<TopNavigation accessoryLeft={ToggleMenuAction} title="Eva Application" style={{backgroundColor:'red'}}/>
);
const MenuButton = () => (
<TopNavigation accessoryLeft={ToggleMenuAction} style={{backgroundColor:'red'}}/>
);
关于react-navigation - 在标题选项中使用 UIKitten 图标 react 导航 5,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63539244/
我的应用程序中有一个堆栈/抽屉导航。我希望能够在我的顶部标题导航中有一个菜单图标,用于切换抽屉菜单的打开和关闭。 这是我的代码: import * as React from 'react'; imp
我试图在 UI Kitten 中使用 Eva 图标,但最终遇到了这个错误,我在这个问题上花了一段时间,React 和 Reavt-Native 的新手,如果有人能帮助我,我会很高兴 (: render
我是一名优秀的程序员,十分优秀!