ScrollView

一个支持垂直或水平滚动的可滚动容器。

Android

iOS

Web

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~57.0.18

一个可滚动容器，默认是垂直滚动。对于水平列表，请使用 direction="horizontal"。

原生实现

平台	底层组件
Android	一个带有 `verticalScroll` 或 `horizontalScroll` 修饰符的 Jetpack Compose `Column` 或 `Row`。此实现会渲染所有子元素，不是惰性容器
iOS	SwiftUI `ScrollView`
Web	React Native `ScrollView`

安装

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.

使用

垂直滚动

VerticalScrollViewExample.tsx

import { useColorScheme } from 'react-native';
import { Host, ScrollView, Column, Text } from '@expo/ui';

export default function VerticalScrollViewExample() {
  const colorScheme = useColorScheme();
  const ink = { color: colorScheme === 'dark' ? '#FFFFFF' : '#000000' };

  return (
    <Host style={{ flex: 1 }}>
      <ScrollView>
        <Column spacing={8}>
          {Array.from({ length: 30 }).map((_, i) => (
            <Text key={i} textStyle={ink}>
              {`Row ${i + 1}`}
            </Text>
          ))}
        </Column>
      </ScrollView>
    </Host>
  );
}

水平滚动

HorizontalScrollViewExample.tsx

import { useColorScheme } from 'react-native';
import { Host, ScrollView, Row, Text } from '@expo/ui';

export default function HorizontalScrollViewExample() {
  const colorScheme = useColorScheme();
  const ink = { color: colorScheme === 'dark' ? '#FFFFFF' : '#000000' };

  return (
    <Host matchContents={{ vertical: true }} style={{ width: '100%' }}>
      <ScrollView direction="horizontal">
        <Row spacing={12}>
          {Array.from({ length: 20 }).map((_, i) => (
            <Text key={i} textStyle={ink}>
              {`Item ${i + 1}`}
            </Text>
          ))}
        </Row>
      </ScrollView>
    </Host>
  );
}

API

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

Component

`ScrollView`

Android

iOS

Web

Type: React.Element<ScrollViewProps>

A scrollable container that supports vertical or horizontal scrolling.

Props for the ScrollView component.

ScrollViewProps

`children`

Android

iOS

Web

Optional • Type: ReactNode

Content to render inside the scroll view.

`direction`

Android

iOS

Web

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

Scroll direction.

Acceptable values are: 'vertical' | 'horizontal'

`disabled`

Android

iOS

Web

Optional • Type: boolean

Whether the component is disabled. Disabled components do not respond to user interaction.

`hidden`

Android

iOS

Web

Optional • Type: boolean

Whether the component is hidden.

`modifiers`

Android

iOS

Optional • Type: ModifierConfig[]

Platform-specific modifier escape hatch. Pass an array of modifier configs from @expo/ui/swift-ui/modifiers or @expo/ui/jetpack-compose/modifiers. A modifier supplied here replaces any modifier of the same type that the component derives from style or other props.

`onAppear`

Android

iOS

Web

Optional • Type: () => void

Called when the component appears on screen.

`onDisappear`

Android

iOS

Web

Optional • Type: () => void

Called when the component is removed from screen.

`onPress`

Android

iOS

Web

Optional • Type: () => void

Called when the component is pressed.

`showsIndicators`

iOS

Web

Optional • Type: boolean • Default: true

Whether to show scroll indicators.

`style`

Android

iOS

Web

Optional • Type:

Pick<ViewStyle, 'padding' | 'paddingHorizontal' | 'paddingVertical' | 'paddingTop' | 'paddingBottom' | 'paddingLeft' | 'paddingRight' | 'backgroundColor' | 'borderRadius' | 'borderWidth' | 'borderColor' | 'opacity' | 'width' | 'height'>

Platform-agnostic style properties. These are translated to SwiftUI modifiers on iOS and Jetpack Compose modifiers on Android.

`testID`

Android

iOS

Web

Optional • Type: string

Identifier used to locate the component in end-to-end tests.