VStack

用于垂直布局的 SwiftUI VStack 组件。

iOS

tvOS

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~57.0.18

有关跨平台用法，请参阅通用的 Column —— 它会为每个平台渲染相应的原生组件。

Expo UI VStack 与官方 SwiftUI VStack API 保持一致，并将其子元素垂直排列。

安装

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.

用法

基础垂直堆叠

BasicVStackExample.tsx

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

export default function BasicVStackExample() {
  // Give the host a size when the stack needs room to align its children.
  return (
    <Host style={{ flex: 1 }}>
      <VStack spacing={12}>
        <Text>第一</Text>
        <Text>第二</Text>
        <Text>第三</Text>
      </VStack>
    </Host>
  );
}

使用对齐方式

alignment 属性用于控制子元素的水平对齐方式。可用选项有：leading、center 和 trailing。

VStackAlignmentExample.tsx

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

export default function VStackAlignmentExample() {
  return (
    <Host style={{ flex: 1 }}>
      <VStack spacing={12} alignment="leading">
        <Rectangle modifiers={[frame({ width: 50, height: 50 })]} />
        <Rectangle
          modifiers={[frame({ width: 100, height: 50 })]}
        />
        <Rectangle modifiers={[frame({ width: 75, height: 50 })]} />
      </VStack>
    </Host>
  );
}

API

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

Component

`VStack`

iOS

tvOS

Type: React.Element<VStackProps>

VStackProps

`alignment`

iOS

tvOS

Optional • Literal type: string

The horizontal alignment of children within the stack.

Acceptable values are: 'center' | 'leading' | 'trailing'

`children`

iOS

tvOS

Type: ReactNode

`spacing`

iOS

tvOS

Optional • Type: number

The spacing between children.

Inherited props

CommonViewModifierProps