叠加

一个 SwiftUI 覆盖组件，用于在另一个视图上叠加内容。

iOS

tvOS

Included in Expo Go

Recommended version:

~57.0.3

Expo UI Overlay 与官方 SwiftUI 的 overlay 修饰符相匹配，并提供了一种在视图上叠加次要内容的方法，可以通过指定的对齐方式进行定位。

A bell icon with a red 3 notification badge overlaid at the top-trailing corner

安装

🌐 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

OverlayExample.tsx

import { Host, Overlay, Text, Image } from '@expo/ui/swift-ui';
import {
  foregroundStyle,
  frame,
  font,
  background,
  clipShape,
  offset,
} from '@expo/ui/swift-ui/modifiers';

export default function OverlayExample() {
  return (
    <Host style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Overlay alignment="topTrailing">
        <Image
          systemName="bell.fill"
          modifiers={[font({ size: 28 }), foregroundStyle('#007AFF')]}
        />
        <Overlay.Content>
          <Text
            modifiers={[
              font({ size: 11, weight: 'bold' }),
              foregroundStyle('#FFFFFF'),
              frame({ width: 18, height: 18 }),
              background('#FF3B30'),
              clipShape('circle'),
              offset({ x: 8, y: -8 }),
            ]}>
            3
          </Text>
        </Overlay.Content>
      </Overlay>
    </Host>
  );
}

应用接口

🌐 API

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

Component

`Overlay`

Type: React.Element<OverlayProps>

OverlayProps

`alignment`

Optional • Type: Alignment • Default: 'center'

The alignment of the overlay content relative to the base content.

`children`

Type: ReactNode

Inherited Props

CommonViewModifierProps