懒惰垂直堆叠

用于懒惰垂直布局的 SwiftUI LazyVStack 组件。

iOS

tvOS

Included in Expo Go

Recommended version:

~57.0.22

Expo UI LazyVStack 与官方 SwiftUI LazyVStack API 匹配，并将其子项垂直排列，只有在需要时（在滚动过程中变得可见时）才创建项目。

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

信息 LazyVStack 其实还不是真正的懒加载：原生端只会构建可见的项目，但 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 vertical stack

LazyVStack 应该在 ScrollView 内使用以启用懒加载渲染。

🌐 LazyVStack should be used inside a ScrollView to enable lazy rendering.

BasicLazyVStackExample.tsx

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

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

带对齐

🌐 With alignment

alignment 属性控制子元素的水平对齐方式。可用选项包括：leading、center 和 trailing。

🌐 The alignment prop controls horizontal alignment of children. Available options are: leading, center, and trailing.

LazyVStackAlignmentExample.tsx

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

export default function LazyVStackAlignmentExample() {
  return (
    <Host
      matchContents={{ vertical: true }}
      style={{ width: '100%' }}>
      <ScrollView>
        <LazyVStack spacing={12} alignment="leading">
          <Rectangle
            modifiers={[frame({ width: 50, height: 50 })]}
          />
          <Rectangle
            modifiers={[frame({ width: 100, height: 50 })]}
          />
          <Rectangle
            modifiers={[frame({ width: 75, height: 50 })]}
          />
        </LazyVStack>
      </ScrollView>
    </Host>
  );
}

应用接口

🌐 API

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

Component

`LazyVStack`

iOS

tvOS

Type: React.Element<LazyVStackProps>

LazyVStackProps

`alignment`

iOS

tvOS

Optional • Literal type: string

The horizontal alignment of children within the stack.

Acceptable values are: 'center' | 'leading' | 'trailing'

`children`

iOS

tvOS

Type: ReactNode

`spacing`

iOS

tvOS

Optional • Type: number

The spacing between children.

Inherited props

CommonViewModifierProps