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

LazyHStack

一个用于惰性水平布局的 SwiftUI LazyHStack 组件。

iOS

tvOS

Included in Expo Go

GitHub

npm

更新日志

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

LazyHStack 目前还不是真正的懒加载：原生端只会构建可见项，但 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.

用法

基本的懒加载水平堆栈

LazyHStack 应该放在带有 axes="horizontal" 的 ScrollView 内，以启用懒加载渲染。

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}>{`项目 ${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 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`

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