Row

用于水平放置子元素的 Jetpack Compose Row 组件。

Android

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~58.0.1

信息如需跨平台使用，请参阅通用的 Row——它会根据平台渲染相应的原生组件。

Expo UI Row 与 Jetpack Compose 官方的 Row 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.

用法

Row 可水平排列子组件。使用 horizontalArrangement 和 verticalAlignment 控制间距和对齐方式。

RowExample.tsx

import {
  Host,
  Row,
  Text,
  useMaterialColors,
} from '@expo/ui/jetpack-compose';
import {
  fillMaxWidth,
  height,
} from '@expo/ui/jetpack-compose/modifiers';

export default function RowExample() {
  const colors = useMaterialColors();

  return (
    <Host style={{ flex: 1 }}>
      <Row
        horizontalArrangement="spaceEvenly"
        verticalAlignment="center"
        modifiers={[fillMaxWidth(), height(60)]}>
        <Text style={{ fontSize: 28 }} color={colors.onBackground}>
          Item 1
        </Text>
        <Text style={{ fontSize: 28 }} color={colors.onBackground}>
          Item 2
        </Text>
        <Text style={{ fontSize: 28 }} color={colors.onBackground}>
          Item 3
        </Text>
      </Row>
    </Host>
  );
}

API

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

Component

`Row`

Android

Type: React.Element<RowProps>

RowProps

`children`

Android

Optional • Type: ReactNode

`horizontalAlignment`

Android

Optional • Type: HorizontalAlignment

Horizontal alignment of children.

`horizontalArrangement`

Android

Optional • Type: HorizontalArrangement

Horizontal arrangement of children.

`verticalAlignment`

Android

Optional • Type: VerticalAlignment

Vertical alignment of children.

`verticalArrangement`

Android

Optional • Type: VerticalArrangement

Vertical arrangement of children.

Inherited props

PrimitiveBaseProps