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 将儿童垂直排列。使用 verticalArrangement 和 horizontalAlignment 来控制间距和对齐。

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