This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 56).

间隔器

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

iOS

tvOS

Included in Expo Go

GitHub

npm

更新日志

有关跨平台使用，请参阅通用的 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>左侧</Text>
        <Spacer />
        <Text>右侧</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>顶部</Text>
        <Spacer />
        <Text>底部</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