ProComponents, templates & AI tooling
HeroUI
2.3k
快速开始
组件
发布说明

Menu 菜单更新

浮动上下文菜单，支持定位、选择分组与多种呈现方式。

Figma源代码样式源代码

导入

import { Menu, SubMenu } from 'heroui-native';

结构

<Menu>
  <Menu.Trigger>...</Menu.Trigger>
  <Menu.Portal>
    <Menu.Overlay />
    <Menu.Content presentation="popover">
      <Menu.Close />
      <Menu.Label>...</Menu.Label>
      <Menu.Group>
        <Menu.Item>
          <Menu.ItemIndicator />
          <Menu.ItemTitle>...</Menu.ItemTitle>
          <Menu.ItemDescription>...</Menu.ItemDescription>
        </Menu.Item>
      </Menu.Group>
      <SubMenu>
        <SubMenu.Trigger textValue="...">
          <SubMenu.TriggerIndicator />
          ...
        </SubMenu.Trigger>
        <SubMenu.Content>
          <Menu.Item>...</Menu.Item>
          <Menu.Item>...</Menu.Item>
        </SubMenu.Content>
      </SubMenu>
    </Menu.Content>
  </Menu.Portal>
</Menu>
  • Menu：主容器，管理开闭状态与定位，并向子组件提供上下文。
  • Menu.Trigger：可点击元素，用于切换菜单显隐。
  • Menu.Portal：在 Portal 层渲染菜单内容，叠于其他内容之上。
  • Menu.Overlay：可选背景遮罩，用于捕获外部点击并关闭菜单。
  • Menu.Content：菜单内容容器；两种呈现：带定位与碰撞检测的浮动 Popover，或底部抽屉式 Bottom Sheet。
  • Menu.Close：关闭按钮，按下后关闭菜单。
  • Menu.Label：菜单内的非交互分区标题。
  • Menu.Group：对菜单项分组，可选选择模式（无 / 单选 / 多选）。
  • Menu.Item：可按压菜单项，带按压动画反馈；可独立使用或置于 Group 内参与选择。
  • Menu.ItemTitle：菜单项主标题文本。
  • Menu.ItemDescription：菜单项次要说明文本。
  • Menu.ItemIndicator：菜单项选中指示（对勾或圆点）。
  • SubMenu：子菜单根容器，管理展开/收起状态并为子级提供动画上下文。
  • SubMenu.Trigger：可按压行，切换子菜单开闭；样式与普通菜单项一致。
  • SubMenu.TriggerIndicator：动画 V 形图标（默认 chevron-right），随子菜单开闭旋转；放在 SubMenu.Trigger 内。
  • SubMenu.Content：绝对定位容器，子菜单开闭时带动画高度变化；其内放置 Menu.Item 等。

用法

基础用法

Menu 通过复合部件组成浮动上下文菜单。

<Menu>
  <Menu.Trigger>...</Menu.Trigger>
  <Menu.Portal>
    <Menu.Overlay />
    <Menu.Content presentation="popover" width={220}>
      <Menu.Item>
        <Menu.ItemTitle>View Profile</Menu.ItemTitle>
      </Menu.Item>
      <Menu.Item>
        <Menu.ItemTitle>Settings</Menu.ItemTitle>
      </Menu.Item>
    </Menu.Content>
  </Menu.Portal>
</Menu>

带副标题

在标题旁为菜单项添加次要说明文字。

<Menu>
  <Menu.Trigger>...</Menu.Trigger>
  <Menu.Portal>
    <Menu.Overlay />
    <Menu.Content presentation="popover" width={260}>
      <Menu.Item className="items-start">
        <View className="flex-1">
          <Menu.ItemTitle>New file</Menu.ItemTitle>
          <Menu.ItemDescription>Create a new file</Menu.ItemDescription>
        </View>
      </Menu.Item>
      <Menu.Item className="items-start">
        <View className="flex-1">
          <Menu.ItemTitle>Copy link</Menu.ItemTitle>
          <Menu.ItemDescription>Copy the file link</Menu.ItemDescription>
        </View>
      </Menu.Item>
    </Menu.Content>
  </Menu.Portal>
</Menu>

单选

使用 Menu.Group 并设置 selectionMode="single"，同一时间仅允许选中一项。

const [theme, setTheme] = useState<Set<MenuKey>>(() => new Set(['system']));

<Menu>
  <Menu.Trigger>...</Menu.Trigger>
  <Menu.Portal>
    <Menu.Overlay />
    <Menu.Content presentation="popover" width={180}>
      <Menu.Label>Appearance</Menu.Label>
      <Menu.Group
        selectionMode="single"
        selectedKeys={theme}
        onSelectionChange={setTheme}
      >
        <Menu.Item id="light">
          <Menu.ItemIndicator />
          <Menu.ItemTitle>Light</Menu.ItemTitle>
        </Menu.Item>
        <Menu.Item id="dark">
          <Menu.ItemIndicator />
          <Menu.ItemTitle>Dark</Menu.ItemTitle>
        </Menu.Item>
        <Menu.Item id="system">
          <Menu.ItemIndicator />
          <Menu.ItemTitle>System</Menu.ItemTitle>
        </Menu.Item>
      </Menu.Group>
    </Menu.Content>
  </Menu.Portal>
</Menu>;

多选

使用 selectionMode="multiple" 可同时选中多项。

const [textStyles, setTextStyles] = useState<Set<MenuKey>>(
  () => new Set(['bold', 'italic'])
);

<Menu>
  <Menu.Trigger>...</Menu.Trigger>
  <Menu.Portal>
    <Menu.Overlay />
    <Menu.Content presentation="popover" width={250}>
      <Menu.Label>Text Style</Menu.Label>
      <Menu.Group
        selectionMode="multiple"
        selectedKeys={textStyles}
        onSelectionChange={setTextStyles}
      >
        <Menu.Item id="bold">
          <Menu.ItemIndicator />
          <Menu.ItemTitle>Bold</Menu.ItemTitle>
        </Menu.Item>
        <Menu.Item id="italic">
          <Menu.ItemIndicator />
          <Menu.ItemTitle>Italic</Menu.ItemTitle>
        </Menu.Item>
        <Menu.Item id="underline">
          <Menu.ItemIndicator />
          <Menu.ItemTitle>Underline</Menu.ItemTitle>
        </Menu.Item>
      </Menu.Group>
    </Menu.Content>
  </Menu.Portal>
</Menu>;

子菜单

在 Menu.Content 内嵌套 SubMenu，按压后展开更多项。

<Menu>
  <Menu.Trigger asChild>
    <Button variant="secondary">Editor Menu</Button>
  </Menu.Trigger>
  <Menu.Portal>
    <Menu.Overlay />
    <Menu.Content presentation="popover" width={240}>
      <Menu.Item>
        <Menu.ItemTitle>New Space</Menu.ItemTitle>
      </Menu.Item>
      <SubMenu>
        <SubMenu.Trigger textValue="Focus">
          <SubMenu.TriggerIndicator />
          <Text className="flex-1 text-base font-medium text-foreground">
            Focus
          </Text>
        </SubMenu.Trigger>
        <SubMenu.Content>
          <Menu.Item>
            <Menu.ItemTitle>Zen Mode</Menu.ItemTitle>
          </Menu.Item>
          <Menu.Item>
            <Menu.ItemTitle>Reader Mode</Menu.ItemTitle>
          </Menu.Item>
          <Menu.Item>
            <Menu.ItemTitle>Lock Tab</Menu.ItemTitle>
          </Menu.Item>
        </SubMenu.Content>
      </SubMenu>
      <Menu.Item>
        <Menu.ItemTitle>Heading 1</Menu.ItemTitle>
      </Menu.Item>
    </Menu.Content>
  </Menu.Portal>
</Menu>

危险变体

对破坏性操作在菜单项上使用 variant="danger"。

<Menu>
  <Menu.Trigger>...</Menu.Trigger>
  <Menu.Portal>
    <Menu.Overlay />
    <Menu.Content presentation="popover" width={220}>
      <Menu.Item>
        <Menu.ItemTitle>Edit</Menu.ItemTitle>
      </Menu.Item>
      <Menu.Item variant="danger">
        <Menu.ItemTitle>Delete</Menu.ItemTitle>
      </Menu.Item>
    </Menu.Content>
  </Menu.Portal>
</Menu>

方位

控制菜单相对触发器出现的位置。

<Menu>
  <Menu.Trigger>...</Menu.Trigger>
  <Menu.Portal>
    <Menu.Overlay />
    <Menu.Content presentation="popover" placement="right" width={200}>
      <Menu.Item>
        <Menu.ItemTitle>Option A</Menu.ItemTitle>
      </Menu.Item>
      <Menu.Item>
        <Menu.ItemTitle>Option B</Menu.ItemTitle>
      </Menu.Item>
    </Menu.Content>
  </Menu.Portal>
</Menu>

Bottom Sheet 呈现

使用 presentation="bottom-sheet" 以底部抽屉形式展示菜单内容。

<Menu presentation="bottom-sheet">
  <Menu.Trigger>...</Menu.Trigger>
  <Menu.Portal>
    <Menu.Overlay />
    <Menu.Content presentation="bottom-sheet">
      <Menu.Item>
        <Menu.ItemTitle>Option A</Menu.ItemTitle>
      </Menu.Item>
      <Menu.Item>
        <Menu.ItemTitle>Option B</Menu.ItemTitle>
      </Menu.Item>
    </Menu.Content>
  </Menu.Portal>
</Menu>

圆点指示器

在 Menu.ItemIndicator 上使用 variant="dot" 显示实心圆点，而非对勾。

<Menu>
  <Menu.Trigger>...</Menu.Trigger>
  <Menu.Portal>
    <Menu.Overlay />
    <Menu.Content presentation="popover" width={180}>
      <Menu.Group
        selectionMode="single"
        selectedKeys={alignment}
        onSelectionChange={setAlignment}
      >
        <Menu.Item id="left">
          <Menu.ItemIndicator variant="dot" />
          <Menu.ItemTitle>Left</Menu.ItemTitle>
        </Menu.Item>
        <Menu.Item id="center">
          <Menu.ItemIndicator variant="dot" />
          <Menu.ItemTitle>Center</Menu.ItemTitle>
        </Menu.Item>
        <Menu.Item id="right">
          <Menu.ItemIndicator variant="dot" />
          <Menu.ItemTitle>Right</Menu.ItemTitle>
        </Menu.Item>
      </Menu.Group>
    </Menu.Content>
  </Menu.Portal>
</Menu>

示例

import type { MenuKey } from 'heroui-native';
import { Button, Menu, Separator } from 'heroui-native';
import { useState } from 'react';
import { Text, View } from 'react-native';

export default function MenuExample() {
  const [textStyles, setTextStyles] = useState<Set<MenuKey>>(
    () => new Set(['bold', 'italic'])
  );
  const [alignment, setAlignment] = useState<Set<MenuKey>>(
    () => new Set(['left'])
  );

  return (
    <Menu>
      <Menu.Trigger asChild>
        <Button variant="secondary">Styles</Button>
      </Menu.Trigger>
      <Menu.Portal>
        <Menu.Overlay />
        <Menu.Content presentation="popover" width={250}>
          <Menu.Label className="mb-1">Text Style</Menu.Label>
          <Menu.Group
            selectionMode="multiple"
            selectedKeys={textStyles}
            onSelectionChange={setTextStyles}
          >
            <Menu.Item id="bold">
              <Menu.ItemIndicator />
              <Menu.ItemTitle>Bold</Menu.ItemTitle>
              <Text className="text-sm text-muted">⌘ B</Text>
            </Menu.Item>
            <Menu.Item id="italic">
              <Menu.ItemIndicator />
              <Menu.ItemTitle>Italic</Menu.ItemTitle>
              <Text className="text-sm text-muted">⌘ I</Text>
            </Menu.Item>
            <Menu.Item id="underline">
              <Menu.ItemIndicator />
              <Menu.ItemTitle>Underline</Menu.ItemTitle>
              <Text className="text-sm text-muted">⌘ U</Text>
            </Menu.Item>
          </Menu.Group>
          <Separator className="mx-2 my-2 opacity-75" />
          <Menu.Label className="mb-1">Text Alignment</Menu.Label>
          <Menu.Group
            selectionMode="single"
            selectedKeys={alignment}
            onSelectionChange={setAlignment}
          >
            <Menu.Item id="left">
              <Menu.ItemIndicator variant="dot" />
              <Menu.ItemTitle>Left</Menu.ItemTitle>
            </Menu.Item>
            <Menu.Item id="center">
              <Menu.ItemIndicator variant="dot" />
              <Menu.ItemTitle>Center</Menu.ItemTitle>
            </Menu.Item>
            <Menu.Item id="right">
              <Menu.ItemIndicator variant="dot" />
              <Menu.ItemTitle>Right</Menu.ItemTitle>
            </Menu.Item>
          </Menu.Group>
        </Menu.Content>
      </Menu.Portal>
    </Menu>
  );
}

更多示例见 GitHub 仓库。

API 参考

proptypedefaultdescription
childrenReact.ReactNode-菜单内容
presentation'popover' | 'bottom-sheet''popover'菜单内容的呈现方式
isOpenboolean-受控开闭状态
isDefaultOpenboolean-非受控：首次渲染时是否打开
isDisabledboolean-是否禁用菜单
animationMenuRootAnimation-菜单根级动画配置
onOpenChange(open: boolean) => void-开闭状态变化时触发
...ViewPropsViewProps-支持 React Native View 的全部标准属性

菜单根组件的动画配置，可为：

  • "disable-all"：关闭所有动画（含子级）
  • true 或 undefined：使用默认动画
proptypedefaultdescription
childrenReact.ReactNode-触发器内容
classNamestring-触发器额外 class
isDisabledbooleanfalse是否禁用触发器
asChildboolean-使用 Slot 模式将行为合并到单个子元素
...PressablePropsPressableProps-支持 React Native Pressable 的全部标准属性
proptypedefaultdescription
childrenReact.ReactNode-Portal 内容
classNamestring-Portal 容器额外 class
disableFullWindowOverlaybooleanfalse在 iOS 上使用普通 View 替代 FullWindowOverlay
unstable_accessibilityContainerViewIsModalbooleanfalse控制 VoiceOver 是否将遮罩窗口视为模态容器。为 true 时焦点限制在遮罩内。仅 iOS。不稳定：可能随 react-native-screens 更新变化
hostNamestring-Portal 宿主元素的可选名称
forceMountboolean-无论开闭状态是否强制挂载 Portal
proptypedefaultdescription
classNamestring-遮罩额外 class
closeOnPressbooleantrue点击遮罩时是否关闭菜单
animationMenuOverlayAnimation-遮罩动画配置
isAnimatedStyleActivebooleantrue是否启用 Reanimated 动画样式
forceMountboolean-无论开闭是否强制挂载遮罩
...PressablePropsPressableProps-支持 React Native Pressable 的全部标准属性

菜单遮罩的动画配置，可为：

  • false 或 "disabled"：关闭所有动画
  • true 或 undefined：使用默认动画
  • object：自定义动画配置
proptypedefaultdescription
state'disabled' | boolean-关闭动画的同时仍允许自定义属性
opacity.entering.valueEntryOrExitLayoutTypeFadeIn.duration(200)遮罩进入动画
opacity.exiting.valueEntryOrExitLayoutTypeFadeOut.duration(150)遮罩退出动画

当 presentation="popover" 时的属性。

proptypedefaultdescription
childrenReact.ReactNode-菜单内容
presentation'popover'-呈现方式（须与 Menu 根一致）
placement'top' | 'bottom' | 'left' | 'right''bottom'相对触发器的弹出方位
align'start' | 'center' | 'end''center'沿对齐轴相对触发器的对齐方式
avoidCollisionsbooleantrue是否自动避让屏幕边缘
offsetnumber9与触发器的间距（像素）
alignOffsetnumber0沿对齐轴的偏移（像素）
width'content-fit' | 'trigger' | 'full' | number'content-fit'内容宽度策略
classNamestring-内容容器额外 class
animationMenuContentAnimation-内容动画配置
...ViewPropsViewProps-支持 React Native View 的全部标准属性

Popover 内容动画配置，可为：

  • false 或 "disabled"：关闭所有动画
  • true 或 undefined：使用默认动画
  • object：自定义动画配置
proptypedefaultdescription
state'disabled' | boolean-关闭动画的同时仍允许自定义属性
entering.valueEntryOrExitLayoutTypeScale + fade entering animation自定义进入动画
exiting.valueEntryOrExitLayoutTypeScale + fade exiting animation自定义退出动画

当 presentation="bottom-sheet" 时的属性。继承 @gorhom/bottom-sheet 的 BottomSheet 属性。

proptypedefaultdescription
childrenReact.ReactNode-底部抽屉内容
presentation'bottom-sheet'-呈现方式（须与 Menu 根一致）
classNamestring-底部抽屉额外 class
backgroundClassNamestring-背景额外 class
handleIndicatorClassNamestring-把手指示条额外 class
contentContainerClassNamestring-内容容器额外 class
contentContainerPropsOmit<BottomSheetViewProps, 'children'>-内容容器属性
animationAnimationDisabled-设为 false 或 "disabled" 可关闭动画
...BottomSheetPropsPartial<BottomSheetProps>-支持 @gorhom/bottom-sheet 的全部属性

继承 CloseButtonProps。按下后自动关闭菜单。

proptypedefaultdescription
iconPropsCloseButtonIconProps-自定义关闭图标属性
...ButtonPropsButtonRootProps-支持 Button 根级全部属性
proptypedefaultdescription
childrenReact.ReactNode-分组内容（Menu.Item 等）
selectionMode'none' | 'single' | 'multiple''none'分组内允许的选择类型
selectedKeysIterable<MenuKey>-当前选中键（受控）
defaultSelectedKeysIterable<MenuKey>-初始选中键（非受控）
isDisabledbooleanfalse是否禁用整个分组
disabledKeysIterable<MenuKey>-应禁用的项键集合
shouldCloseOnSelectboolean-选中项时是否关闭菜单
classNamestring-分组容器额外 class
onSelectionChange(keys: Set<MenuKey>) => void-选中变化时回调
...ViewPropsViewProps-支持 React Native View 的全部标准属性
proptypedefaultdescription
childrenReact.ReactNode-标签文本内容
classNamestring-标签额外 class
...TextPropsTextProps-支持 React Native Text 的全部标准属性
proptypedefaultdescription
childrenReact.ReactNode | ((props: MenuItemRenderProps) => ReactNode)-子元素或渲染函数
idMenuKey-唯一标识；在 Menu.Group 内时必填
variant'default' | 'danger''default'菜单项视觉变体
isDisabledbooleanfalse是否禁用该项
isSelectedboolean-独立项时的受控选中状态
shouldCloseOnSelectbooleantrue按压该项是否关闭菜单
classNamestring-菜单项额外 class
animationMenuItemAnimation-按压反馈动画配置
isAnimatedStyleActivebooleantrue是否启用 Reanimated 动画样式
onSelectedChange(selected: boolean) => void-独立项选中状态变化时回调
...PressablePropsPressableProps-支持 React Native Pressable 的全部标准属性

当 children 为函数时传入渲染函数的参数。

proptypedescription
isSelectedboolean当前项是否选中
isDisabledboolean是否禁用
isPressedSharedValue<boolean>是否处于按压中
variant'default' | 'danger'项的视觉变体

菜单项按压反馈动画配置，可为：

  • false 或 "disabled"：关闭项动画
  • true 或 undefined：使用默认动画
  • object：自定义动画配置
proptypedefaultdescription
scale.valuenumber0.98按压时的缩放值
scale.timingConfigWithTimingConfig{ duration: 150 }缩放的动画配置
backgroundColor.valuestringuseThemeColor('default')按压时背景色
backgroundColor.timingConfigWithTimingConfig{ duration: 150 }背景色过渡时间配置
proptypedefaultdescription
childrenReact.ReactNode-标题文本内容
classNamestring-标题额外 class
...TextPropsTextProps-支持 React Native Text 的全部标准属性
proptypedefaultdescription
childrenReact.ReactNode-说明文本内容
classNamestring-说明额外 class
...TextPropsTextProps-支持 React Native Text 的全部标准属性
proptypedefaultdescription
childrenReact.ReactNode-自定义指示内容；默认为对勾或圆点
variant'checkmark' | 'dot''checkmark'指示器视觉变体
iconPropsMenuItemIndicatorIconProps-图标配置（对勾变体）
forceMountbooleantrue无论是否选中都强制挂载指示器
classNamestring-指示器额外 class
...ViewPropsViewProps-支持 React Native View 的全部标准属性
proptypedefaultdescription
sizenumber16指示图标尺寸（圆点变体为 8）
colorstringmuted指示图标颜色
proptypedefaultdescription
childrenReact.ReactNode-子菜单内容（触发器、内容区等）
isOpenboolean-受控开闭状态
isDefaultOpenboolean-非受控：首次渲染时是否打开
isDisabledbooleanfalse是否禁用子菜单
classNamestring-根容器额外 class
animationSubMenuRootAnimation-子菜单动画配置
onOpenChange(open: boolean) => void-开闭状态变化时回调
...ViewPropsViewProps-支持 React Native View 的全部标准属性

SubMenu 根组件动画配置，可为：

  • "disable-all"：关闭所有动画（含子级）
  • false 或 "disabled"：仅关闭根级动画
  • true 或 undefined：使用默认动画
  • object：自定义动画配置
proptypedefaultdescription
state'disabled' | boolean-关闭动画的同时仍允许自定义属性
rootContent.marginHorizontalnumber-16子菜单打开时水平外边距
rootContent.marginVerticalnumber-16子菜单打开时垂直外边距
rootContent.paddingHorizontalnumber6子菜单打开时水平内边距
rootContent.paddingTopnumber12子菜单打开时顶部内边距
rootContent.springConfigWithSpringConfig{ damping: 100, stiffness: 950, mass: 3 }展开/收起的弹簧配置
proptypedefaultdescription
childrenReact.ReactNode-触发器内容（标题、图标、指示器等）
textValuestring-读屏播报的无障碍文本
classNamestring-触发器额外 class
isDisabledbooleanfalse是否禁用
asChildboolean-使用 Slot 模式合并到单个子元素
...PressablePropsPressableProps-支持 React Native Pressable 的全部标准属性

子菜单开闭时旋转的指示图标，默认为向右 V 形（chevron-right）。

proptypedefaultdescription
childrenReact.ReactNode-自定义指示内容（替换默认 V 形）
classNamestring-指示器额外 class
iconPropsSubMenuTriggerIndicatorIconProps-默认 V 形的图标配置
animationSubMenuTriggerIndicatorAnimation-指示器旋转动画配置
isAnimatedStyleActivebooleantrue是否启用 Reanimated 动画样式
...ViewPropsViewProps-支持 React Native View 的全部标准属性
proptypedefaultdescription
sizenumber14指示图标尺寸
colorstringmuted指示图标颜色

触发器指示旋转的动画配置，可为：

  • false 或 "disabled"：关闭所有动画
  • true 或 undefined：使用默认动画
  • object：自定义动画配置
proptypedefaultdescription
state'disabled' | boolean-关闭动画的同时仍允许自定义属性
rotation.value[number, number][0, 90]旋转角度 [收起, 展开]，单位度
rotation.springConfigWithSpringConfig{ damping: 140, stiffness: 1000, mass: 4 }旋转弹簧配置
proptypedefaultdescription
childrenReact.ReactNode-子菜单项（Menu.Item、Menu.Group 等）
classNamestring-内容容器额外 class
...PressablePropsPressableProps-支持 React Native Pressable 的全部标准属性

Hooks

useMenu

访问菜单根上下文，须在 Menu 内使用。

import { useMenu } from 'heroui-native';

const { isOpen, onOpenChange, presentation, isDisabled } = useMenu();

返回值

propertytypedescription
isOpenboolean菜单是否打开
onOpenChange(open: boolean) => void修改开闭状态的回调
presentation'popover' | 'bottom-sheet'当前呈现模式
isDisabledboolean | undefined是否禁用
nativeIDstring菜单实例唯一标识

useMenuItem

访问菜单项上下文，须在 Menu.Item 内使用。

import { useMenuItem } from 'heroui-native';

const { id, isSelected, isDisabled, variant } = useMenuItem();

返回值

propertytypedescription
idMenuKey | undefined项标识
isSelectedboolean是否选中
isDisabledboolean是否禁用
variant'default' | 'danger'项的视觉变体

useMenuAnimation

访问菜单动画上下文，须在 Menu 内使用。

import { useMenuAnimation } from 'heroui-native';

const { progress, isDragging } = useMenuAnimation();

返回值

propertytypedescription
progressSharedValue<number>动画进度（0=空闲，1=打开，2=关闭）
isDraggingSharedValue<boolean>Bottom Sheet 是否正在被拖拽

useSubMenu

访问子菜单上下文，须在 SubMenu 内使用。

import { useSubMenu } from 'heroui-native';

const { isOpen, onOpenChange, isDisabled } = useSubMenu();

返回值

propertytypedescription
isOpenboolean子菜单是否打开
onOpenChange(open: boolean) => void修改开闭状态的回调
isDisabledboolean是否禁用
nativeIDstring子菜单实例唯一标识

特别说明

元素检查器（iOS）

Menu 在 iOS 上使用 FullWindowOverlay。开发时若需启用 React Native 元素检查器，请在 Menu.Portal 上设置 disableFullWindowOverlay={true}。代价是菜单将无法叠在原生模态之上。

原生模态（iOS）

当 Menu 位于以原生模态形式呈现的页面内时（presentation: 'modal' | 'formSheet' | 'pageSheet'），菜单内容可能会向上偏移渲染。在新架构（Fabric）中，react-native-screens 将 RNSModalScreen 标记为 Fabric 根节点，因此触发器的坐标是相对于模态原点上报的，而 FullWindowOverlay（菜单挂载点）锚定在 iOS 应用窗口上。可通过将 safeAreaInsets.top 加到 offset 来补偿：

import { useSafeAreaInsets } from 'react-native-safe-area-context';

const insets = useSafeAreaInsets();

<Menu.Content presentation="popover" offset={insets.top}>
  ...
</Menu.Content>;

ListGroup 列表组

基于 Surface 的容器，用于分组展示列表项并保持一致的布局与间距。

Popover 弹出框

锚定在触发器上的浮动内容面板，支持方位与对齐选项。

本页目录

导入结构用法基础用法带副标题单选多选子菜单危险变体方位Bottom Sheet 呈现圆点指示器示例API 参考MenuMenuRootAnimationMenu.TriggerMenu.PortalMenu.OverlayMenuOverlayAnimationMenu.Content（Popover）MenuContentAnimationMenu.Content（Bottom Sheet）Menu.CloseMenu.GroupMenu.LabelMenu.ItemMenuItemRenderPropsMenuItemAnimationMenu.ItemTitleMenu.ItemDescriptionMenu.ItemIndicatorMenuItemIndicatorIconPropsSubMenuSubMenuRootAnimationSubMenu.TriggerSubMenu.TriggerIndicatorSubMenuTriggerIndicatorIconPropsSubMenuTriggerIndicatorAnimationSubMenu.ContentHooksuseMenu返回值useMenuItem返回值useMenuAnimation返回值useSubMenu返回值特别说明元素检查器（iOS）原生模态（iOS）