懒汉堆栈

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

iOS

tvOS

Included in Expo Go

Recommended version:

~57.0.3

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).

安装

🌐 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

基本懒惰水平堆叠

🌐 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 style={{ flex: 1 }}>
      <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`

Type: React.Element<LazyHStackProps>

LazyHStackProps

`alignment`

Optional • Literal type: string

The vertical alignment of children within the stack.

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

`children`

Type: ReactNode

`spacing`

Optional • Type: number

The spacing between children.

Inherited Props

CommonViewModifierProps