FlowRow

一个 Jetpack Compose FlowRow 组件，可用于水平换行排列子元素。

Android

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~58.0.1

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

用法

FlowRow 以水平流式布局排列子项，空间不足时会换到下一行。

FlowRowExample.tsx

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

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

  return (
    <Host style={{ flex: 1 }}>
      <FlowRow
        horizontalArrangement={{ spacedBy: 8 }}
        verticalArrangement={{ spacedBy: 8 }}
        modifiers={[paddingAll(16)]}>
        {tags.map(tag => (
          <Text
            key={tag}
            style={{ fontSize: 28 }}
            color={colors.onBackground}
            modifiers={[
              border(1, colors.outline),
              padding(12, 6, 12, 6),
            ]}>
            {tag}
          </Text>
        ))}
      </FlowRow>
    </Host>
  );
}

API

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

Component

`FlowRow`

Android

Type: React.Element<FlowRowProps>

FlowRowProps

`children`

Android

Optional • Type: ReactNode

`horizontalArrangement`

Android

Optional • Type: HorizontalArrangement

Horizontal arrangement of children.

`verticalArrangement`

Android

Optional • Type: VerticalArrangement

Vertical arrangement of children.

Inherited props

PrimitiveBaseProps