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

LazyRow

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

Android

Included in Expo Go

GitHub

npm

更新日志

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

LazyRow 目前还不是真正的懒加载：原生侧只会组合可见项，但 React 仍会提前创建每个子项，因此大型列表在挂载时可能会很慢。我们正在努力改进这一点。对于大型列表，我们建议使用 FlashList 或 Legend List。

安装

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.

用法

基础懒加载行

BasicLazyRow.tsx

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

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

export default function BasicLazyRow() {
  return (
    <Host style={{ height: 100 }}>
      <LazyRow>
        {items.map(item => (
          <Text key={item}>{item}</Text>
        ))}
      </LazyRow>
    </Host>
  );
}

带排列方式

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

LazyRowArrangement.tsx

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

export default function LazyRowArrangement() {
  return (
    <Host style={{ height: 100 }}>
      <LazyRow horizontalArrangement={{ spacedBy: 16 }} verticalAlignment="center">
        <Text>间隔项 1</Text>
        <Text>间隔项 2</Text>
        <Text>间隔项 3</Text>
      </LazyRow>
    </Host>
  );
}

带内容内边距

使用 contentPadding 属性可为列表内容四周添加 dp 内边距。

LazyRowPadding.tsx

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

export default function LazyRowPadding() {
  return (
    <Host style={{ height: 100 }}>
      <LazyRow contentPadding={{ start: 16, top: 8, end: 16, bottom: 8 }}>
        <Text>带内边距的项目 1</Text>
        <Text>带内边距的项目 2</Text>
        <Text>带内边距的项目 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: 'center' | 'start' | 'end' | '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'