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

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

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

Expo UI Column 与官方 Jetpack Compose Column API 保持一致，并以可配置的排列方式和对齐方式垂直放置子元素。

安装

If you are installing this in an existing React Native app, make sure to install expo in your project.

用法

Column 会垂直放置子元素。使用 verticalArrangement 和 horizontalAlignment 来控制间距和对齐方式。

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>第一个</Text>
        <Text>第二个</Text>
        <Text>第三个</Text>
      </Column>
    </Host>
  );
}

API

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

Component