间隔器

用于灵活间距的 SwiftUI Spacer 组件。

iOS

tvOS

Bundled version:

~55.0.2

Expo UI Spacer 与官方的 SwiftUI Spacer API 相匹配，并会在堆栈中扩展以填充可用空间。

🌐 Expo UI Spacer matches the official SwiftUI Spacer API and expands to fill available space in a stack.

安装

🌐 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

HStack 中的基本间隔

🌐 Basic spacer in HStack

使用间隔器将内容推到水平堆栈的两端。

🌐 Use Spacer to push content to opposite ends of a horizontal stack.

SpacerHStackExample.tsx

import { Host, HStack, Text, Spacer } from '@expo/ui/swift-ui';

export default function SpacerHStackExample() {
  return (
    <Host style={{ flex: 1 }}>
      <HStack>
        <Text>Left</Text>
        <Spacer />
        <Text>Right</Text>
      </HStack>
    </Host>
  );
}

VStack 中的基本间隔符

🌐 Basic spacer in VStack

使用间隔器将内容推到垂直堆叠的两端。

🌐 Use Spacer to push content to opposite ends of a vertical stack.

SpacerVStackExample.tsx

import { Host, VStack, Text, Spacer } from '@expo/ui/swift-ui';

export default function SpacerVStackExample() {
  return (
    <Host style={{ flex: 1 }}>
      <VStack>
        <Text>Top</Text>
        <Spacer />
        <Text>Bottom</Text>
      </VStack>
    </Host>
  );
}

应用接口

🌐 API

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

Component

`Spacer`

iOS

tvOS

Type: React.Element<SpacerProps>

SpacerProps

`minLength`

iOS

tvOS

Optional • Type: number

The minimum length of the spacer. This is the minimum amount of space that the spacer will take up.

Inherited Props

CommonViewModifierProps