LazyRow

用于显示水平滚动列表的 Jetpack Compose LazyRow 组件。

Android

Included in Expo Go

Recommended version:

~57.0.22

一个懒加载的水平列表组件，它只渲染可见的项目，以实现高效滚动。有关更多信息，请参见官方 Jetpack Compose 文档。

🌐 A lazily-loaded horizontal list component that only renders visible items for efficient scrolling. See the official Jetpack Compose documentation for more information.

信息 LazyRow 还不是真正的惰性加载：原生端只会渲染可见的项目，但 React 仍然会提前创建所有子元素，所以大列表挂载可能会很慢。我们正在努力改进这一点。对于大列表，我们推荐使用 FlashList 或 Legend List。

LazyRow rendering colored category cards in a horizontally scrolling list

安装

🌐 Installation

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.

用法

🌐 Usage

基础懒惰行

🌐 Basic lazy row

BasicLazyRow.tsx

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

const items = Array.from(
  { length: 100 },
  (_, i) => `Item ${i + 1}`
);

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

  return (
    <Host style={{ height: 100 }}>
      <LazyRow>
        {items.map(item => (
          <Text
            key={item}
            style={{ fontSize: 28 }}
            color={colors.onBackground}
            modifiers={[
              border(1, colors.outline),
              padding(12, 6, 12, 6),
            ]}>
            {item}
          </Text>
        ))}
      </LazyRow>
    </Host>
  );
}

有安排

🌐 With arrangement

使用 horizontalArrangement 属性来控制列表中项目的间距。传入字符串值如 'spaceBetween' 或对象如 { spacedBy: 8 } 来设置固定的 dp 间距。

🌐 Use the horizontalArrangement prop to control how items are spaced within the list. Pass a string value like 'spaceBetween' or an object like { spacedBy: 8 } for fixed spacing in dp.

LazyRowArrangement.tsx

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

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

  return (
    <Host style={{ height: 100 }}>
      <LazyRow
        horizontalArrangement={{ spacedBy: 16 }}
        verticalAlignment="center">
        <Text
          style={{ fontSize: 28 }}
          color={colors.onBackground}
          modifiers={[
            border(1, colors.outline),
            padding(12, 6, 12, 6),
          ]}>
          Spaced item 1
        </Text>
        <Text
          style={{ fontSize: 28 }}
          color={colors.onBackground}
          modifiers={[
            border(1, colors.outline),
            padding(12, 6, 12, 6),
          ]}>
          Spaced item 2
        </Text>
        <Text
          style={{ fontSize: 28 }}
          color={colors.onBackground}
          modifiers={[
            border(1, colors.outline),
            padding(12, 6, 12, 6),
          ]}>
          Spaced item 3
        </Text>
      </LazyRow>
    </Host>
  );
}

带内容填充

🌐 With content padding

使用 contentPadding 属性在列表内容周围添加以 dp 为单位的内边距。

🌐 Use the contentPadding prop to add padding around the list content in dp.

LazyRowPadding.tsx

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

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

  return (
    <Host style={{ height: 100 }}>
      <LazyRow
        contentPadding={{ start: 16, top: 8, end: 16, bottom: 8 }}>
        <Text
          style={{ fontSize: 28 }}
          color={colors.onBackground}
          modifiers={[
            border(1, colors.outline),
            padding(12, 6, 12, 6),
          ]}>
          Padded item 1
        </Text>
        <Text
          style={{ fontSize: 28 }}
          color={colors.onBackground}
          modifiers={[
            border(1, colors.outline),
            padding(12, 6, 12, 6),
          ]}>
          Padded item 2
        </Text>
        <Text
          style={{ fontSize: 28 }}
          color={colors.onBackground}
          modifiers={[
            border(1, colors.outline),
            padding(12, 6, 12, 6),
          ]}>
          Padded item 3
        </Text>
      </LazyRow>
    </Host>
  );
}

应用接口

🌐 API

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

Component

`LazyRow`

Android

Type: React.Element<LazyRowProps>

A lazy row component that efficiently displays a horizontally scrolling list.

LazyRowProps

`children`

Android

Optional • Type: ReactNode

The content to display inside the lazy row.

`contentPadding`

Android

Optional • Type: ContentPadding

Content padding in dp.

`horizontalArrangement`

Android

Optional • Literal type: union

The horizontal arrangement of items. Can be a preset string or an object with spacedBy to specify spacing in dp.

Acceptable values are: 'start' | 'end' | 'center' | 'spaceBetween' | 'spaceAround' | 'spaceEvenly' | { spacedBy: number }

`modifiers`

Android

Optional • Type: ModifierConfig[]

Modifiers for the component.

`verticalAlignment`

Android

Optional • Literal type: string

The vertical alignment of items.

Acceptable values are: 'center' | 'top' | 'bottom'