Docs
博客更新日志GitHub简中文档
首页指南EAS参考学习

Reference version

存档Expo SnackDiscord 和论坛新闻邮件
This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 55).

弹出框

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

iOS

GitHub

npm

更新日志

For the complete documentation index, see llms.txt. Use this Use this file to discover all available pages.

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

安装

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.

用法

基础 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 matchContents>
      <Popover
        isPresented={isPresented}
        onStateChange={({ isPresented }) => setIsPresented(isPresented)}>
        <Popover.Trigger>
          <Button label="显示 Popover" onPress={() => setIsPresented(true)} />
        </Popover.Trigger>
        <Popover.Content>
          <VStack modifiers={[padding({ all: 16 })]}>
            <Text>来自 Popover 的问候！</Text>
          </VStack>
        </Popover.Content>
      </Popover>
    </Host>
  );
}

使用 attachment anchor

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 matchContents>
      <Popover
        isPresented={isPresented}
        onStateChange={({ isPresented }) => setIsPresented(isPresented)}
        attachmentAnchor="trailing">
        <Popover.Trigger>
          <Button label="显示 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 matchContents>
      <Popover
        isPresented={isPresented}
        onStateChange={({ isPresented }) => setIsPresented(isPresented)}
        arrowEdge="top">
        <Popover.Trigger>
          <Button label="显示 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 matchContents>
      <Popover
        isPresented={isPresented}
        onStateChange={({ isPresented }) => setIsPresented(isPresented)}>
        <Popover.Trigger>
          <Button label="显示 RN Popover" onPress={() => setIsPresented(true)} />
        </Popover.Trigger>
        <Popover.Content>
          <RNHostView matchContents>
            <View style={{ padding: 16 }}>
              <RNText style={{ fontSize: 16, fontWeight: 'bold' }}>React Native 内容</RNText>
              <RNText style={{ color: '#666', marginVertical: 8 }}>计数器：{counter}</RNText>
              <Pressable
                style={{
                  backgroundColor: '#007AFF',
                  padding: 12,
                  borderRadius: 8,
                  alignItems: 'center',
                }}
                onPress={() => setCounter(counter + 1)}>
                <RNText style={{ color: 'white' }}>递增</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: 'leading' | 'trailing' | 'top' | 'bottom' | 'none'

attachmentAnchor

iOS
Optional • Literal type: string

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

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

children

iOS
Type: React.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