This is documentation for the next SDK version.

背景

一个 SwiftUI Background 组件，用于在另一个视图后方分层放置内容。

iOS

tvOS

Included in Expo Go

GitHub

npm

更新日志

Expo UI Background 与官方 SwiftUI background 修饰符相匹配，会在视图后方绘制背景内容，并按照指定的对齐方式进行定位。基础视图保持自身大小不变。

若要使用颜色、材质或渐变填充视图，请使用 @expo/ui/swift-ui/modifiers 中的 background 修饰符。

安装

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.

用法

基础背景

BackgroundExample.tsx

import {
  Background,
  Host,
  RoundedRectangle,
  Text,
} from '@expo/ui/swift-ui';
import {
  font,
  foregroundStyle,
  padding,
} from '@expo/ui/swift-ui/modifiers';

export default function BackgroundExample() {
  return (
    <Host
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <Background>
        <Text
          modifiers={[
            font({ size: 17, weight: 'semibold' }),
            padding({ all: 16 }),
            foregroundStyle('#1C1C1E'),
          ]}>
          Card title
        </Text>
        <Background.Content>
          <RoundedRectangle
            cornerRadius={12}
            modifiers={[foregroundStyle('#E8F0FE')]}
          />
        </Background.Content>
      </Background>
    </Host>
  );
}

背景对齐方式

使用 alignment 属性相对于基础视图定位背景内容。由于背景不会影响基础视图的布局，因此可以将较小的背景固定在某一条边上。

BackgroundAlignmentExample.tsx

import {
  Background,
  Host,
  Rectangle,
  Text,
} from '@expo/ui/swift-ui';
import {
  font,
  foregroundStyle,
  frame,
} from '@expo/ui/swift-ui/modifiers';

export default function BackgroundAlignmentExample() {
  return (
    <Host
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <Background alignment="bottom">
        <Text modifiers={[font({ size: 17 })]}>
          Underlined by its background
        </Text>
        <Background.Content>
          <Rectangle
            modifiers={[
              frame({ height: 3 }),
              foregroundStyle('#007AFF'),
            ]}
          />
        </Background.Content>
      </Background>
    </Host>
  );
}

API

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

Component

`Background`

iOS

tvOS

Type: React.Element<BackgroundProps>

BackgroundProps

`alignment`

iOS

tvOS

Optional • Type: Alignment • Default: 'center'

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

`children`

iOS

tvOS

Type: ReactNode

Inherited props

CommonViewModifierProps