native-base@3.2.1-rc.1版本如何实现Menu.Item的onPress点击事件

修复方案 #

• 先修正Menu组件的错误属性：h="100%"会导致菜单可点击区域和触发层重叠，top="-85"偏移量过大也会造成点击区域错位，调整为合理的偏移值即可。
• 修正点击事件里的弹框写法：React Native没有全局的alert方法，要使用从react-native导入的Alert.alert()触发弹框。
• 如果你使用的是native-base 2.x版本，将Menu.Item的onPress属性替换为onSelect，2.x版本菜单点击事件用的是onSelect回调。
• 可选：给Menu.Item显式添加isDisabled={false}属性，规避部分native-base版本默认状态继承的bug。

修改后可运行的代码

import React from "react"
import {
  Menu,
  HamburgerIcon,
  Box,
  Center,
  NativeBaseProvider,
  Pressable
} from "native-base"
import { Alert } from "react-native";
import { logout } from "../_redux/_actions/authentication.actions";


export const NavMenu = (props) => { 
  const menuItems = ['Profile','Sign Out'];

  return (
    <Box h="80%" w="95%" alignItems="flex-start">
      <Menu w="150" top="10"
        trigger={(triggerProps) => {
          return (
            <Pressable accessibilityLabel="More options menu" {...triggerProps}>
              <HamburgerIcon color="black" />
            </Pressable>
          )
        }}
      >
        <Menu.Item onPress={()=>Alert.alert("Alert Title")} isDisabled={false}>
          Logout
        </Menu.Item>
      </Menu>
    </Box>
  )
}

export default () => {
  return (
    <NativeBaseProvider>
      <Center flex={1} px="1">
        <NavMenu />
      </Center>
    </NativeBaseProvider>
  )
}

内容的提问来源于stack exchange，提问作者rangerdanger