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

LazyVStack

一个用于懒加载垂直布局的 SwiftUI LazyVStack 组件。

iOS

tvOS

Included in Expo Go

GitHub

npm

更新日志

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

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

用法

基本懒加载垂直堆栈

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

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}>{`项目 ${i}`}</Text>
          ))}
        </LazyVStack>
      </ScrollView>
    </Host>
  );
}

带对齐方式

alignment 属性用于控制子项的水平对齐方式。可用选项为：leading、center 和 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 style={{ flex: 1 }}>
      <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