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

用于垂直放置子项的 Jetpack Compose Column 组件。

Android
Included in Expo Go
Recommended version:
~57.0.3

信息 有关跨平台使用,请参阅通用 Column —— 它会根据平台呈现相应的原生组件。

Expo UI 列与官方 Jetpack Compose Column API 相匹配,并以可配置的排列和对齐方式垂直放置子元素。

🌐 Expo UI Column matches the official Jetpack Compose Column API and places children vertically with configurable arrangement and alignment.

Three colored boxes stacked vertically inside a Column

安装

🌐 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

Column 将儿童垂直排列。使用 verticalArrangementhorizontalAlignment 来控制间距和对齐。

ColumnExample.tsx
import { Host, Column, Text } from '@expo/ui/jetpack-compose'; import { fillMaxWidth, paddingAll } from '@expo/ui/jetpack-compose/modifiers'; export default function ColumnExample() { return ( <Host matchContents> <Column verticalArrangement={{ spacedBy: 8 }} horizontalAlignment="center" modifiers={[fillMaxWidth(), paddingAll(16)]}> <Text>First</Text> <Text>Second</Text> <Text>Third</Text> </Column> </Host> ); }

应用接口

🌐 API

import { Column } from '@expo/ui/jetpack-compose';

Component

Column

Type: React.Element<ColumnProps>

ColumnProps

children

Optional • Type: ReactNode

horizontalAlignment

Optional • Type: HorizontalAlignment

Horizontal alignment of children.

horizontalArrangement

Optional • Type: HorizontalArrangement

Horizontal arrangement of children.

verticalAlignment

Optional • Type: VerticalAlignment

Vertical alignment of children.

verticalArrangement

Optional • Type: VerticalArrangement

Vertical arrangement of children.

Inherited Props

  • PrimitiveBaseProps