FlowRow

一个用于水平封装子组件的 Jetpack Compose FlowRow 组件。

Android

Included in Expo Go

Recommended version:

~57.0.3

Expo UI FlowRow 与官方 Jetpack Compose FlowRow API 相匹配，并以水平流的方式排列子元素，当空间不足时会换行到下一行。

🌐 Expo UI FlowRow matches the official Jetpack Compose FlowRow API and arranges children in a horizontal flow that wraps to the next line when it runs out of space.

Six assist chip tags wrapping across multiple lines

安装

🌐 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

FlowRow 将子元素排列成水平流，当空间不足时会换行到下一行。

FlowRowExample.tsx

import { Host, FlowRow, Text } from '@expo/ui/jetpack-compose';
import { paddingAll } from '@expo/ui/jetpack-compose/modifiers';

export default function FlowRowExample() {
  const tags = ['React Native', 'Expo', 'Android', 'Jetpack Compose', 'Material 3', 'Kotlin'];

  return (
    <Host matchContents>
      <FlowRow
        horizontalArrangement={{ spacedBy: 8 }}
        verticalArrangement={{ spacedBy: 8 }}
        modifiers={[paddingAll(16)]}>
        {tags.map(tag => (
          <Text key={tag}>{tag}</Text>
        ))}
      </FlowRow>
    </Host>
  );
}

应用接口

🌐 API

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

Component

`FlowRow`

Type: React.Element<FlowRowProps>

FlowRowProps

`children`

Optional • Type: ReactNode

`horizontalArrangement`

Optional • Type: HorizontalArrangement

Horizontal arrangement of children.

`verticalArrangement`

Optional • Type: VerticalArrangement

Vertical arrangement of children.

Inherited Props

PrimitiveBaseProps