ScrollView

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

iOS

tvOS

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~58.0.1

有关跨平台用法，请参阅通用 ScrollView——它会根据平台渲染相应的原生组件。

Expo UI ScrollView 与官方 SwiftUI ScrollView API 相匹配，并提供可滚动的容器来容纳其子元素。

安装

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.

用法

基本垂直滚动视图

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

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 })]}>
              {`Item ${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}>{`Item ${i + 1}`}</Text>
          ))}
        </VStack>
      </ScrollView>
    </Host>
  );
}

共享滚动位置

需要 iOS 17 或更高版本。在较早版本中，此修饰符不执行任何操作。

从 JavaScript 跟踪前导滚动目标 ID，并通过写入状态滚动到目标。使用 id 修饰符标记每个滚动目标，将内容容器包裹在 scrollTargetLayout 中，并将 scrollPosition 修饰符应用于 ScrollView。当前导目标发生变化时，可选的 onChange 回调会在 JS 线程上触发。

scrollPosition 修饰符也适用于其他可滚动容器，例如 LazyVStack 和 LazyHStack。

对 state.value 的写入必须在 UI runtime 上运行。请使用 react-native-worklets 中的 scheduleOnUI 包裹写入，或在 'worklet' 函数内部调用。来自 JS runtime 的写入会触发 Main Thread Checker；这是 Xcode 的运行时工具，用于标记从后台线程发起的 UIKit 调用。

ScrollViewSharedPositionExample.tsx

import {
  Button,
  Host,
  ScrollView,
  Text,
  VStack,
  useNativeState,
} from '@expo/ui/swift-ui';
import {
  id,
  padding,
  scrollPosition,
  scrollTargetLayout,
} from '@expo/ui/swift-ui/modifiers';
import { scheduleOnUI } from 'react-native-worklets';

export default function ScrollViewSharedPositionExample() {
  const activeID = useNativeState<string | null>(null);

  return (
    <Host style={{ flex: 1 }}>
      <VStack spacing={12}>
        <ScrollView
          modifiers={[
            scrollPosition(activeID, {
              onChange: newID => {
                console.log('[JS thread] leading target:', newID);
              },
            }),
          ]}>
          <VStack modifiers={[scrollTargetLayout()]}>
            {Array.from({ length: 30 }, (_, i) => (
              <Text
                key={`item-${i}`}
                modifiers={[
                  id(`item-${i}`),
                  padding({ horizontal: 16, vertical: 12 }),
                ]}>
                {`Item ${i}`}
              </Text>
            ))}
          </VStack>
        </ScrollView>
        <Button
          label="Scroll to item 10 from worklet"
          onPress={() => {
            scheduleOnUI(() => {
              'worklet';
              activeID.value = 'item-10';
            });
          }}
        />
      </VStack>
    </Host>
  );
}

未裁剪的滚动内容

需要 iOS 17 或更高版本。在较早版本中，此修饰符不执行任何操作。

滚动视图会将内容裁剪到自身边界，因此超出边界绘制的内容（例如阴影或放大后超出边缘的卡片）会被截断。应用 scrollClipDisabled 修饰符可使这些内容保持可见。

ScrollViewUnclippedExample.tsx

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

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

API

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

Component

`ScrollView`

iOS

tvOS

Type: React.Element<ScrollViewProps>

SwiftUI ScrollView wrapper. To control scroll position, pair this with the scrollPosition(state, { onChange }) modifier and a useNativeState-backed id. Write state.value = targetId for an instant scroll, or wrap the write in withAnimation(...) from @expo/ui/swift-ui for an animated one.

ScrollViewProps

`axes`

iOS

tvOS

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

The scrollable axes. Pass 'both' to enable 2D (horizontal + vertical) scrolling.

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

`children`

iOS

tvOS

Type: ReactNode

`showsIndicators`

iOS

tvOS

Optional • Type: boolean • Default: true

Whether to show scroll indicators. For richer visibility control (e.g. 'never') or per-axis control, use the scrollIndicators(...) modifier instead.

Inherited props

CommonViewModifierProps

Types

`ScrollGeometry`

iOS

tvOS

Snapshot of a ScrollView's scroll geometry, emitted by the useScrollGeometryChange(...) and onScrollPhaseChange(...) modifiers (iOS 18+).

Property	Type	Description
containerHeight	`number`	Height of the visible scroll container, in points.
containerWidth	`number`	Width of the visible scroll container, in points.
contentHeight	`number`	Total height of the scrollable content, in points.
contentOffsetX	`number`	Horizontal content offset, in points.
contentOffsetY	`number`	Vertical content offset, in points.
contentWidth	`number`	Total width of the scrollable content, in points.

`ScrollPhase`

iOS

tvOS

Literal type: string

Scroll phase emitted by the onScrollPhaseChange(...) modifier. Mirrors SwiftUI's ScrollPhase (iOS 18+).

Acceptable values are: 'idle' | 'tracking' | 'interacting' | 'animating' | 'decelerating'