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>