文档
BlogChangelogStar us on GitHub
首页指南EASReferenceLearn

Reference version

存档Expo SnackDiscord and forums新闻邮件

This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

列

用于通用 @expo/ui 组件的垂直布局容器。

Android
iOS
Web
Included in Expo Go

GitHub

npm

更新日志

Recommended version:
~56.0.26

一种垂直布局容器，将其子项从上到下排列。在 iOS 上委托给 SwiftUI 的 VStack，在 Android 上委托给 Jetpack Compose 的 Column，在 web 上委托给 flex View。

安装

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.

用法

基础列布局

ColumnExample.tsx
import { Host, Column, Text } from '@expo/ui';

export default function ColumnExample() {
  return (
    <Host matchContents>
      <Column spacing={8}>
        <Text>第一</Text>
        <Text>第二</Text>
        <Text>第三</Text>
      </Column>
    </Host>
  );
}

对齐

使用 alignment 沿交叉（水平）轴定位子项。

ColumnAlignmentExample.tsx
import { Host, Column, Text } from '@expo/ui';

export default function ColumnAlignmentExample() {
  return (
    <Host style={{ flex: 1 }}>
      <Column spacing={8} alignment="center">
        <Text>居中</Text>
        <Text>居中</Text>
      </Column>
    </Host>
  );
}

API

import { Column } from '@expo/ui';

Component

Column

Android
iOS
Web

Type: React.Element<ColumnProps>

A vertical layout container that arranges its children from top to bottom.

Props for the Column component, a vertical layout container.

ColumnProps

alignment

Android
iOS
Web
Optional • Literal type: string • Default: 'start'

Cross-axis (horizontal) alignment of children.

Acceptable values are: 'start' | 'center' | 'end'

children

Android
iOS
Web
Optional • Type: ReactNode

Content to render inside the column.

disabled

Android
iOS
Web
Optional • Type: boolean

Whether the component is disabled. Disabled components do not respond to user interaction.

hidden

Android
iOS
Web
Optional • Type: boolean

Whether the component is hidden.

modifiers

Android
iOS
Optional • Type: ModifierConfig[]

Platform-specific modifier escape hatch. Pass an array of modifier configs from @expo/ui/swift-ui/modifiers or @expo/ui/jetpack-compose/modifiers.

onAppear

Android
iOS
Web
Optional • Type: () => void

Called when the component appears on screen.

onDisappear

Android
iOS
Web
Optional • Type: () => void

Called when the component is removed from screen.

onPress

Android
iOS
Web
Optional • Type: () => void

Called when the component is pressed.

spacing

Android
iOS
Web
Optional • Type: number

Vertical spacing between children, in density-independent pixels.

style

Android
iOS
Web
Optional • Type: Pick<ViewStyle, 'padding' | 'paddingHorizontal' | 'paddingVertical' | 'paddingTop' | 'paddingBottom' | 'paddingLeft' | 'paddingRight' | 'backgroundColor' | 'borderRadius' | 'borderWidth' | 'borderColor' | 'opacity' | 'width' | 'height'>

Platform-agnostic style properties. These are translated to SwiftUI modifiers on iOS and Jetpack Compose modifiers on Android.

testID

Android
iOS
Web
Optional • Type: string

Identifier used to locate the component in end-to-end tests.