Z堆栈

用于重叠布局的 SwiftUI ZStack 组件。

iOS

tvOS

Included in Expo Go

Recommended version:

~57.0.22

Expo UI ZStack 与官方 SwiftUI ZStack API 相匹配，并将其子元素叠加在一起。

🌐 Expo UI ZStack matches the official SwiftUI ZStack API and overlays its children on top of each other.

Three colored rounded squares stacked along the z-axis with diagonal offsets in a ZStack

安装

🌐 Installation

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.

用法

🌐 Usage

基本重叠堆

🌐 Basic overlapping stack

BasicZStackExample.tsx

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

export default function BasicZStackExample() {
  return (
    <Host style={{ flex: 1 }}>
      <ZStack>
        <Rectangle
          modifiers={[
            frame({ width: 100, height: 100 }),
            foregroundStyle('blue'),
          ]}
        />
        <Text modifiers={[foregroundStyle('white')]}>Overlay</Text>
      </ZStack>
    </Host>
  );
}

带对齐

🌐 With alignment

alignment 属性控制子元素在堆叠中的排列方式。可用选项包括：center、leading、trailing、top、bottom、topLeading、topTrailing、bottomLeading 和 bottomTrailing。

🌐 The alignment prop controls how children are positioned within the stack. Available options include: center, leading, trailing, top, bottom, topLeading, topTrailing, bottomLeading, and bottomTrailing.

ZStackAlignmentExample.tsx

import { Host, ZStack, Rectangle, Circle } from '@expo/ui/swift-ui';
import {
  frame,
  foregroundStyle,
} from '@expo/ui/swift-ui/modifiers';

export default function ZStackAlignmentExample() {
  return (
    <Host style={{ flex: 1 }}>
      <ZStack alignment="bottomTrailing">
        <Rectangle
          modifiers={[
            frame({ width: 100, height: 100 }),
            foregroundStyle('blue'),
          ]}
        />
        <Circle
          modifiers={[
            frame({ width: 30, height: 30 }),
            foregroundStyle('red'),
          ]}
        />
      </ZStack>
    </Host>
  );
}

创建徽章覆盖

🌐 Creating a badge overlay

ZStackBadgeExample.tsx

import {
  Host,
  ZStack,
  Circle,
  Text,
  Image,
} from '@expo/ui/swift-ui';
import {
  frame,
  foregroundStyle,
} from '@expo/ui/swift-ui/modifiers';

export default function ZStackBadgeExample() {
  return (
    <Host matchContents>
      <ZStack alignment="topTrailing">
        <Image systemName="bell.fill" size={32} color="blue" />
        <Circle
          modifiers={[
            frame({ width: 16, height: 16 }),
            foregroundStyle('red'),
          ]}
        />
      </ZStack>
    </Host>
  );
}

应用接口

🌐 API

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

Component

`ZStack`

iOS

tvOS

Type: React.Element<ZStackProps>

ZStackProps

`alignment`

iOS

tvOS

Optional • Type: Alignment

The alignment of children within the stack.

`children`

iOS

tvOS

Type: ReactNode

Inherited props

CommonViewModifierProps