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

ScrollView

一个用于可滚动内容的 SwiftUI ScrollView 组件。

iOS

tvOS

GitHub

npm

更新日志

Expo UI ScrollView 与官方 SwiftUI ScrollView API 保持一致，并为其子元素提供一个可滚动容器。

安装

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.

用法

基本垂直滚动视图

一个简单的可垂直滚动文本项列表。

ScrollViewVerticalExample.tsx

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

export default function ScrollViewVerticalExample() {
  return (
    <Host style={{ flex: 1 }}>
      <ScrollView>
        <VStack spacing={8}>
          {Array.from({ length: 30 }, (_, i) => (
            <Text key={i} modifiers={[padding({ horizontal: 16 })]}>
              {`项目 ${i + 1}`}
            </Text>
          ))}
        </VStack>
      </ScrollView>
    </Host>
  );
}

水平滚动视图

使用 axes 属性进行水平滚动。

ScrollViewHorizontalExample.tsx

import { Host, ScrollView, HStack, RoundedRectangle } from '@expo/ui/swift-ui';
import { frame, foregroundStyle } from '@expo/ui/swift-ui/modifiers';

export default function ScrollViewHorizontalExample() {
  return (
    <Host style={{ flex: 1 }}>
      <ScrollView axes="horizontal">
        <HStack spacing={8}>
          {Array.from({ length: 20 }, (_, i) => (
            <RoundedRectangle
              key={i}
              cornerRadius={12}
              modifiers={[
                frame({ width: 100, height: 100 }),
                foregroundStyle(`hsl(${i * 18}, 70%, 50%)`),
              ]}
            />
          ))}
        </HStack>
      </ScrollView>
    </Host>
  );
}

隐藏滚动指示器

将 showsIndicators 设置为 false 以隐藏滚动条。

ScrollViewHiddenIndicatorsExample.tsx

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

export default function ScrollViewHiddenIndicatorsExample() {
  return (
    <Host style={{ flex: 1 }}>
      <ScrollView showsIndicators={false}>
        <VStack spacing={8}>
          {Array.from({ length: 30 }, (_, i) => (
            <Text key={i}>{`项目 ${i + 1}`}</Text>
          ))}
        </VStack>
      </ScrollView>
    </Host>
  );
}

API

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

Component

`ScrollView`

iOS

tvOS

Type: React.Element<ScrollViewProps>

ScrollViewProps

`axes`

iOS

tvOS

Optional • Literal type: string • Default: 'vertical'

The scrollable axes.

Acceptable values are: 'vertical' | 'horizontal' | 'both'

`children`

iOS

tvOS

Type: React.ReactNode

`showsIndicators`

iOS

tvOS

Optional • Type: boolean • Default: true

Whether to show scroll indicators.

Inherited Props

CommonViewModifierProps