LazyVStack

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

iOS

tvOS

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~57.0.0

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

Type: React.Element<LazyVStackProps>

LazyVStackProps

`alignment`

Optional • Literal type: string

The horizontal alignment of children within the stack.

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

`children`

Type: ReactNode

`spacing`

Optional • Type: number

The spacing between children.

Inherited props

CommonViewModifierProps