懒汉堆栈

用于懒惰水平布局的 SwiftUI LazyHStack 组件。

iOS

tvOS

Included in Expo Go

Recommended version:

~57.0.22

Expo UI LazyHStack 与官方 SwiftUI LazyHStack API 一致，并水平排列其子视图，仅在需要时（在滚动过程中变得可见时）创建项目。

🌐 Expo UI LazyHStack matches the official SwiftUI LazyHStack API and arranges its children horizontally, creating items only as needed (when they become visible during scrolling).

信息 LazyHStack 还不是真正的懒加载：原生端只会构建可见的项目，但 React 仍会提前创建每个子项，所以大型列表挂载可能会很慢。我们正在努力改进这一点。对于大型列表，我们推荐使用 FlashList 或 Legend 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 horizontal stack

LazyHStack 应该在带有 axes="horizontal" 的 ScrollView 内使用，以启用惰性渲染。

🌐 LazyHStack should be used inside a ScrollView with axes="horizontal" to enable lazy rendering.

BasicLazyHStackExample.tsx

import {
  Host,
  ScrollView,
  LazyHStack,
  Text,
} from '@expo/ui/swift-ui';

export default function BasicLazyHStackExample() {
  return (
    <Host style={{ flex: 1 }}>
      <ScrollView axes="horizontal">
        <LazyHStack spacing={12}>
          {Array.from({ length: 100 }, (_, i) => (
            <Text key={i}>{`Item ${i}`}</Text>
          ))}
        </LazyHStack>
      </ScrollView>
    </Host>
  );
}

带对齐

🌐 With alignment

alignment 属性控制子元素的垂直对齐方式。可用选项有：top、center、bottom、firstTextBaseline 和 lastTextBaseline。

🌐 The alignment prop controls vertical alignment of children. Available options are: top, center, bottom, firstTextBaseline, and lastTextBaseline.

LazyHStackAlignmentExample.tsx

import {
  Host,
  ScrollView,
  LazyHStack,
  Rectangle,
} from '@expo/ui/swift-ui';
import { frame } from '@expo/ui/swift-ui/modifiers';

export default function LazyHStackAlignmentExample() {
  return (
    <Host
      matchContents={{ horizontal: true }}
      style={{ flex: 1, alignSelf: 'center' }}>
      <ScrollView axes="horizontal">
        <LazyHStack spacing={12} alignment="top">
          <Rectangle
            modifiers={[frame({ width: 50, height: 50 })]}
          />
          <Rectangle
            modifiers={[frame({ width: 50, height: 100 })]}
          />
          <Rectangle
            modifiers={[frame({ width: 50, height: 75 })]}
          />
        </LazyHStack>
      </ScrollView>
    </Host>
  );
}

应用接口

🌐 API

import { LazyHStack } from '@expo/ui/swift-ui';

Component

`LazyHStack`

iOS

tvOS

Type: React.Element<LazyHStackProps>

LazyHStackProps

`alignment`

iOS

tvOS

Optional • Literal type: string

The vertical alignment of children within the stack.

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

`children`

iOS

tvOS

Type: ReactNode

`spacing`

iOS

tvOS

Optional • Type: number

The spacing between children.

Inherited props

CommonViewModifierProps