Native-Base 3：菜单项的 Onpress

Question

所以我正在使用 React-Native 和 Native-Base 3 制作应用程序。但是，我似乎无法弄清楚如何为菜单项制作 onPress。 我可以成功地渲染它，但我似乎无法在文档或其他地方找到当你按下它时实际做某事的例子。 任何解决方法？ 下面是我的代码示例

 <Box style={styles.topNavItems}>
                <Menu
                trigger={(triggerProps) => {
                    return <Pressable><IconButton {...triggerProps} icon={<Icon name={'account-circle-outline'} size={30}/>} /></Pressable>
                  }}>
                      <Menu.Item>Profile</Menu.Item> //pressing this should invoke a function 
                      <Menu.Item>Account</Menu.Item>
                      <Menu.Item>Settings</Menu.Item>
                      <Menu.Item>Tutorials</Menu.Item>
                      <Menu.Item>Help</Menu.Item>
                      <Menu.Item>Sign Out</Menu.Item>

                </Menu>

Answer 1

我也在使用 native-base 3 来开发 react native。

似乎没有用于处理 <Menu.Item /> 的选择类型事件的官方 API。

我的解决方法是通过 .map() 渲染 Menu.Item 并将 onPress 处理添加到 <Menu.Item /> 中的文本：

        const menuItems = ['Profile', ..., 'Sign Out'];
        const handMenuItemSelect = (menuItem) => {...};
    
        ...
    
        return (
          ...
            {menuItems.map(menuItem => {
                return <Menu.Item>
                       <Text onPress={(menuItem) => handMenuSelect(menuItem)}
                           {menuItem}
                       </Text>
                    </Menu.Item>
                    }}
          ...
        )

，其中也来自原生基础。

Answer 2

您可以简单地在Menu.Item本身中添加onPress 。 您可以执行以下操作：

  <Menu
    trigger={triggerProps => {
      return (
        <Pressable {...triggerProps}>
          <ThreeDotsIcon size={30} />
        </Pressable>
      );
    }}>
    <Menu.Item
      onPress={() => {
        alert('Profile pressed');
      }}>
      Profile
    </Menu.Item>
    <Menu.Item
      onPress={() => {
        alert('Account pressed');
      }}>
      Account
    </Menu.Item>
    <Menu.Item
      onPress={() => {
        alert('Settings pressed');
      }}>
      Settings
    </Menu.Item>
    <Menu.Item
      onPress={() => {
        alert('Tutorials pressed');
      }}>
      Tutorials
    </Menu.Item>
    <Menu.Item
      onPress={() => {
        alert('Help pressed');
      }}>
      Help
    </Menu.Item>
    <Menu.Item
      onPress={() => {
        alert('Sign Out pressed');
      }}>
      Sign Out
    </Menu.Item>
  </Menu>