文档
BlogChangelogStar us on GitHub
首页指南EASReferenceLearn

Reference version

存档Expo SnackDiscord and forums新闻邮件

This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

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

弹出框

用于在浮动覆盖层中显示内容的 SwiftUI 弹出框组件。

iOS
Included in Expo Go

GitHub

npm

更新日志

Expo UI Popover 与官方 SwiftUI Popover API 保持一致，并提供了一种方式，可在锚定到触发元素的浮动覆盖层中展示内容。

悬浮在触发按钮上方的 Popover悬浮在触发按钮上方的 Popover

安装

Terminal
- npx expo install @expo/ui
- yarn expo install @expo/ui
- pnpm expo install @expo/ui
- bun expo install @expo/ui

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

用法

基础 popover

BasicPopoverExample.tsx
import { useState } from 'react';
import {
  Host,
  Button,
  Popover,
  Text,
  VStack,
} from '@expo/ui/swift-ui';
import { padding } from '@expo/ui/swift-ui/modifiers';

export default function BasicPopoverExample() {
  const [isPresented, setIsPresented] = useState(false);

  return (
    <Host style={{ flex: 1 }}>
      <Popover
        isPresented={isPresented}
        onIsPresentedChange={isPresented =>
          setIsPresented(isPresented)
        }>
        <Popover.Trigger>
          <Button
            label="Show Popover"
            onPress={() => setIsPresented(true)}
          />
        </Popover.Trigger>
        <Popover.Content>
          <VStack modifiers={[padding({ all: 16 })]}>
            <Text>来自 Popover 的问候！</Text>
          </VStack>
        </Popover.Content>
      </Popover>
    </Host>
  );
}

附着锚点

attachmentAnchor 属性控制 popover 连接到触发元素的位置。可用选项有：center、leading、trailing、top 和 bottom。

AttachmentAnchorExample.tsx
import { useState } from 'react';
import {
  Host,
  Button,
  Popover,
  Text,
  VStack,
} from '@expo/ui/swift-ui';
import { padding } from '@expo/ui/swift-ui/modifiers';

export default function AttachmentAnchorExample() {
  const [isPresented, setIsPresented] = useState(false);

  return (
    <Host style={{ flex: 1 }}>
      <Popover
        isPresented={isPresented}
        onIsPresentedChange={isPresented =>
          setIsPresented(isPresented)
        }
        attachmentAnchor="trailing">
        <Popover.Trigger>
          <Button
            label="Show Popover"
            onPress={() => setIsPresented(true)}
          />
        </Popover.Trigger>
        <Popover.Content>
          <VStack modifiers={[padding({ all: 16 })]}>
            <Text>附着在尾部边缘</Text>
          </VStack>
        </Popover.Content>
      </Popover>
    </Host>
  );
}

箭头边缘

arrowEdge 属性控制 popover 的哪一侧显示箭头。可用选项有：none、leading、trailing、top 和 bottom。

ArrowEdgeExample.tsx
import { useState } from 'react';
import {
  Host,
  Button,
  Popover,
  Text,
  VStack,
} from '@expo/ui/swift-ui';
import { padding } from '@expo/ui/swift-ui/modifiers';

export default function ArrowEdgeExample() {
  const [isPresented, setIsPresented] = useState(false);

  return (
    <Host style={{ flex: 1 }}>
      <Popover
        isPresented={isPresented}
        onIsPresentedChange={isPresented =>
          setIsPresented(isPresented)
        }
        arrowEdge="top">
        <Popover.Trigger>
          <Button
            label="Show Popover"
            onPress={() => setIsPresented(true)}
          />
        </Popover.Trigger>
        <Popover.Content>
          <VStack modifiers={[padding({ all: 16 })]}>
            <Text>箭头位于顶部边缘</Text>
          </VStack>
        </Popover.Content>
      </Popover>
    </Host>
  );
}

使用 React Native 内容

你可以使用 RNHostView 将 React Native 组件嵌入到 popover 内容中。

RNContentPopoverExample.tsx
import { useState } from 'react';
import { Pressable, Text as RNText, View } from 'react-native';
import {
  Host,
  Button,
  Popover,
  RNHostView,
} from '@expo/ui/swift-ui';

export default function RNContentPopoverExample() {
  const [isPresented, setIsPresented] = useState(false);
  const [counter, setCounter] = useState(0);

  return (
    <Host style={{ flex: 1 }}>
      <Popover
        isPresented={isPresented}
        onIsPresentedChange={isPresented =>
          setIsPresented(isPresented)
        }>
        <Popover.Trigger>
          <Button
            label="Show RN Popover"
            onPress={() => setIsPresented(true)}
          />
        </Popover.Trigger>
        <Popover.Content>
          <RNHostView matchContents>
            <View style={{ padding: 16 }}>
              <RNText style={{ fontSize: 16, fontWeight: 'bold' }}>
                React Native Content
              </RNText>
              <RNText style={{ color: '#666', marginVertical: 8 }}>
                Counter: {counter}
              </RNText>
              <Pressable
                style={{
                  backgroundColor: '#007AFF',
                  padding: 12,
                  borderRadius: 8,
                  alignItems: 'center',
                }}
                onPress={() => setCounter(counter + 1)}>
                <RNText style={{ color: 'white' }}>
                  Increment
                </RNText>
              </Pressable>
            </View>
          </RNHostView>
        </Popover.Content>
      </Popover>
    </Host>
  );
}

API

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

Component

Popover

iOS

Type: React.Element<PopoverViewProps>

Props

arrowEdge

iOS
Optional • Literal type: string • Default: 'none'

The edge of the attachmentAnchor that defines the location of the popover's arrow. The default is none, which results in the system allowing any arrow edge.

Acceptable values are: 'top' | 'none' | 'bottom' | 'leading' | 'trailing'

attachmentAnchor

iOS
Optional • Literal type: string

The positioning anchor that defines the attachment point of the popover.

Acceptable values are: 'center' | 'top' | 'bottom' | 'leading' | 'trailing'

children

iOS
Type: ReactNode

isPresented

iOS
Optional • Type: boolean

Whether the popover is presented.

onIsPresentedChange

iOS
Optional • Type: (isPresented: boolean) => void

A callback that is called when the isPresented state changes.

Inherited props