间隔器

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

iOS

tvOS

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~57.0.0

有关跨平台使用，请参阅通用的 Spacer — 它会针对每个平台渲染相应的原生组件。

Expo UI Spacer 与官方 SwiftUI Spacer API 保持一致，并会扩展以填充堆栈中的可用空间。

一个红色的 A 方块位于 HStack 的前导边缘，一个蓝色的 B 方块位于尾随边缘，两者之间由一个 Spacer 分隔

安装

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.

用法

HStack 中的基础 Spacer

使用 Spacer 将内容推到水平堆栈的两端。

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 中的基础 Spacer

使用 Spacer 将内容推到垂直堆栈的两端。

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