ContextMenu

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

iOS

tvOS

Bundled version:

~55.0.2

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

安装

🌐 Installation

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.

用法

🌐 Usage

基本上下文菜单

🌐 Basic context menu

BasicContextMenuExample.tsx

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

export default function BasicContextMenuExample() {
  return (
    <Host matchContents>
      <ContextMenu>
        <ContextMenu.Items>
          <Button label="Edit" onPress={() => console.log('Edit')} />
          <Button label="Delete" role="destructive" onPress={() => console.log('Delete')} />
        </ContextMenu.Items>
        <ContextMenu.Trigger>
          <Text>Long press me</Text>
        </ContextMenu.Trigger>
      </ContextMenu>
    </Host>
  );
}

带系统图片的上下文菜单

🌐 Context menu with system images

ContextMenuWithImagesExample.tsx

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

export default function ContextMenuWithImagesExample() {
  return (
    <Host matchContents>
      <ContextMenu>
        <ContextMenu.Items>
          <Button
            label="Share"
            systemImage="square.and.arrow.up"
            onPress={() => console.log('Share')}
          />
          <Button label="Favorite" systemImage="heart" onPress={() => console.log('Favorite')} />
          <Button
            label="Delete"
            systemImage="trash"
            role="destructive"
            onPress={() => console.log('Delete')}
          />
        </ContextMenu.Items>
        <ContextMenu.Trigger>
          <Text>Long press me</Text>
        </ContextMenu.Trigger>
      </ContextMenu>
    </Host>
  );
}

带预览的上下文菜单

🌐 Context menu with preview

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

🌐 Use ContextMenu.Preview to show a custom preview above the menu when opened.

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="Edit" onPress={() => console.log('Edit')} />
          <Button label="Delete" role="destructive" onPress={() => console.log('Delete')} />
        </ContextMenu.Items>
        <ContextMenu.Trigger>
          <Text>Long press me</Text>
        </ContextMenu.Trigger>
        <ContextMenu.Preview>
          <View style={{ width: 200, height: 100, backgroundColor: '#f0f0f0', padding: 16 }}>
            <RNText>Preview Content</RNText>
          </View>
        </ContextMenu.Preview>
      </ContextMenu>
    </Host>
  );
}

带选择器的上下文菜单

🌐 Context menu with picker

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="Action" onPress={() => console.log('Action')} />
          <Picker
            label="Size"
            modifiers={[pickerStyle('menu')]}
            selection={selectedIndex}
            onSelectionChange={setSelectedIndex}>
            {['Small', 'Medium', 'Large'].map((option, index) => (
              <Text key={index} modifiers={[tag(index)]}>
                {option}
              </Text>
            ))}
          </Picker>
        </ContextMenu.Items>
        <ContextMenu.Trigger>
          <Text>Long press me</Text>
        </ContextMenu.Trigger>
      </ContextMenu>
    </Host>
  );
}

带有部分的上下文菜单

🌐 Context menu with sections

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

🌐 Use Section and Divider components to organize menu items.

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="Edit" onPress={() => console.log('Edit')} />
            <Button label="Duplicate" onPress={() => console.log('Duplicate')} />
          </Section>
          <Divider />
          <Button label="Delete" role="destructive" onPress={() => console.log('Delete')} />
        </ContextMenu.Items>
        <ContextMenu.Trigger>
          <Text>Long press me</Text>
        </ContextMenu.Trigger>
      </ContextMenu>
    </Host>
  );
}

嵌套上下文菜单

🌐 Nested context menus

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

🌐 Use nested ContextMenu components to create submenus.

NestedContextMenuExample.tsx

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

export default function NestedContextMenuExample() {
  return (
    <Host matchContents>
      <ContextMenu>
        <ContextMenu.Items>
          <Button label="Action" onPress={() => console.log('Action')} />
          <ContextMenu>
            <ContextMenu.Items>
              <Button label="Sub Action 1" onPress={() => console.log('Sub 1')} />
              <Button label="Sub Action 2" onPress={() => console.log('Sub 2')} />
            </ContextMenu.Items>
            <ContextMenu.Trigger>
              <Button label="More Options" />
            </ContextMenu.Trigger>
          </ContextMenu>
        </ContextMenu.Items>
        <ContextMenu.Trigger>
          <Text>Long press me</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.