This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 55).

ContextMenu

用于显示上下文菜单的 SwiftUI ContextMenu 组件。

iOS

tvOS

GitHub

npm

更新日志

Expo UI ContextMenu 与官方 SwiftUI contextMenu API 保持一致，并在长按时显示菜单。对于单击菜单交互，请改用 Menu。

安装

Terminal

- npx expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

用法

基础上下文菜单

BasicContextMenuExample.tsx

import { Host, ContextMenu, Button, Text } from '@expo/ui/swift-ui';

export default function BasicContextMenuExample() {
  return (
    <Host matchContents>
      <ContextMenu>
        <ContextMenu.Items>
          <Button label="编辑" onPress={() => console.log('Edit')} />
          <Button label="删除" role="destructive" onPress={() => console.log('Delete')} />
        </ContextMenu.Items>
        <ContextMenu.Trigger>
          <Text>长按我</Text>
        </ContextMenu.Trigger>
      </ContextMenu>
    </Host>
  );
}

带系统图标的上下文菜单

ContextMenuWithImagesExample.tsx

import { Host, ContextMenu, Button, Text } from '@expo/ui/swift-ui';

export default function ContextMenuWithImagesExample() {
  return (
    <Host matchContents>
      <ContextMenu>
        <ContextMenu.Items>
          <Button
            label="分享"
            systemImage="square.and.arrow.up"
            onPress={() => console.log('Share')}
          />
          <Button label="收藏" systemImage="heart" onPress={() => console.log('Favorite')} />
          <Button
            label="删除"
            systemImage="trash"
            role="destructive"
            onPress={() => console.log('Delete')}
          />
        </ContextMenu.Items>
        <ContextMenu.Trigger>
          <Text>长按我</Text>
        </ContextMenu.Trigger>
      </ContextMenu>
    </Host>
  );
}

带预览的上下文菜单

使用 ContextMenu.Preview 可在打开菜单时在菜单上方显示自定义预览。

ContextMenuWithPreviewExample.tsx

import { View, Text as RNText } from 'react-native';
import { Host, ContextMenu, Button, Text } from '@expo/ui/swift-ui';

export default function ContextMenuWithPreviewExample() {
  return (
    <Host matchContents>
      <ContextMenu>
        <ContextMenu.Items>
          <Button label="编辑" onPress={() => console.log('Edit')} />
          <Button label="删除" role="destructive" onPress={() => console.log('Delete')} />
        </ContextMenu.Items>
        <ContextMenu.Trigger>
          <Text>长按我</Text>
        </ContextMenu.Trigger>
        <ContextMenu.Preview>
          <View style={{ width: 200, height: 100, backgroundColor: '#f0f0f0', padding: 16 }}>
            <RNText>预览内容</RNText>
          </View>
        </ContextMenu.Preview>
      </ContextMenu>
    </Host>
  );
}

带选择器的上下文菜单

ContextMenuWithPickerExample.tsx

import { useState } from 'react';
import { Host, ContextMenu, Button, Text, Picker } from '@expo/ui/swift-ui';
import { pickerStyle, tag } from '@expo/ui/swift-ui/modifiers';

export default function ContextMenuWithPickerExample() {
  const [selectedIndex, setSelectedIndex] = useState<number | undefined>(0);

  return (
    <Host matchContents>
      <ContextMenu>
        <ContextMenu.Items>
          <Button label="操作" onPress={() => console.log('Action')} />
          <Picker
            label="大小"
            modifiers={[pickerStyle('menu')]}
            selection={selectedIndex}
            onSelectionChange={setSelectedIndex}>
            {['小', '中', '大'].map((option, index) => (
              <Text key={index} modifiers={[tag(index)]}>
                {option}
              </Text>
            ))}
          </Picker>
        </ContextMenu.Items>
        <ContextMenu.Trigger>
          <Text>长按我</Text>
        </ContextMenu.Trigger>
      </ContextMenu>
    </Host>
  );
}

带分组的上下文菜单

使用 Section 和 Divider 组件来组织菜单项。

ContextMenuWithSectionsExample.tsx

import { Host, ContextMenu, Button, Text, Section, Divider } from '@expo/ui/swift-ui';

export default function ContextMenuWithSectionsExample() {
  return (
    <Host matchContents>
      <ContextMenu>
        <ContextMenu.Items>
          <Section title="操作">
            <Button label="编辑" onPress={() => console.log('Edit')} />
            <Button label="复制" onPress={() => console.log('Duplicate')} />
          </Section>
          <Divider />
          <Button label="删除" role="destructive" onPress={() => console.log('Delete')} />
        </ContextMenu.Items>
        <ContextMenu.Trigger>
          <Text>长按我</Text>
        </ContextMenu.Trigger>
      </ContextMenu>
    </Host>
  );
}

嵌套上下文菜单

使用嵌套的 ContextMenu 组件来创建子菜单。

NestedContextMenuExample.tsx

import { Host, ContextMenu, Button, Text } from '@expo/ui/swift-ui';

export default function NestedContextMenuExample() {
  return (
    <Host matchContents>
      <ContextMenu>
        <ContextMenu.Items>
          <Button label="操作" onPress={() => console.log('Action')} />
          <ContextMenu>
            <ContextMenu.Items>
              <Button label="子操作 1" onPress={() => console.log('Sub 1')} />
              <Button label="子操作 2" onPress={() => console.log('Sub 2')} />
            </ContextMenu.Items>
            <ContextMenu.Trigger>
              <Button label="更多选项" />
            </ContextMenu.Trigger>
          </ContextMenu>
        </ContextMenu.Items>
        <ContextMenu.Trigger>
          <Text>长按我</Text>
        </ContextMenu.Trigger>
      </ContextMenu>
    </Host>
  );
}

API

import { ContextMenu } from '@expo/ui/swift-ui';

Components

`ContextMenu`

iOS

tvOS

Type: React.Element<ContextMenuProps>

ContextMenu allows you to create a context menu, which can be used to provide additional options to the user.

Props of the ContextMenu component.

ContextMenuProps

`children`

iOS

tvOS

Type: ReactNode

The contents of the context menu. Should include ContextMenu.Trigger, ContextMenu.Items, and optionally ContextMenu.Preview.

Inherited Props

CommonViewModifierProps

`Items`

iOS

tvOS

Type: React.Element<{ children: ReactNode }>

Items visible inside the context menu. It could be Section, Divider, Button, Toggle, Picker or even ContextMenu itself for nested menus. Remember to use components from the @expo/ui/swift-ui library.

`Preview`

iOS

tvOS

Type: React.Element<{ children: ReactNode }>

The component visible above the menu when it is opened.

`Trigger`

iOS

tvOS

Type: React.Element<{ children: ReactNode }>

The component visible all the time that triggers the context menu when long-pressed.