LazyHStack

用于创建延迟加载水平布局的 SwiftUI LazyHStack 组件。

iOS

tvOS

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~58.0.1

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

LazyHStack 目前还不是真正的惰性加载：原生端只会构建可见项目，但 React 仍会预先创建所有子视图，因此大型列表的挂载速度可能较慢。我们正在努力改进这一点。对于大型列表，我们建议使用 FlashList 或 Legend List。

安装

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.

用法

基本的惰性水平堆栈

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

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>
  );
}

设置对齐方式

alignment 属性用于控制子视图的垂直对齐方式。可用选项包括：top、center、bottom、firstTextBaseline 和 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