react-native-pager-view

开放Beta测试文档 作为预发布开放Beta测试的一项内容，亚马逊提供了此技术文档。随着亚马逊收到反馈并对功能进行迭代，所描述的这些功能可能会发生变化。有关最新功能的信息，请参阅最新的发布说明。

@amazon-devices/react-native-pager-view通过Stable API，在Kepler上为PagerView库（Callstack开发的3P PagerView）提供支持。

Pager View组件让您能轻松处理带有动态视图的分页。用户可左右滑动切换数据页面。

安装

在package.json文件中添加JavaScript库依赖项。选择适用于您的React Native版本的选项卡。
- React Native 0.72
- React Native 0.83
已复制到剪贴板。
"dependencies": { ... "@amazon-devices/react-native-pager-view": "~2.0.3" }
已复制到剪贴板。
"dependencies": { ... "@amazon-devices/react-native-pager-view": "~2.0.3" }
使用npm install命令重新安装依赖项。

示例

已复制到剪贴板。

import React, { useMemo } from 'react';
import { StyleSheet, View, Animated, Text } from 'react-native';
import PagerView from '@amazon-devices/react-native-pager-view';

const AnimatedPagerView = Animated.createAnimatedComponent(PagerView);

export function App() {
  const pages = useMemo(
    () => [
      { key: 'page1', style: { backgroundColor: 'powderblue' } },
      { key: 'page2', style: { backgroundColor: 'skyblue' } },
      { key: 'page3', style: { backgroundColor: 'steelblue' } },
    ],
    []
  );

  return (
    <View style={styles.container}>
      <AnimatedPagerView
        style={styles.PagerView}
        initialPage={0}
        pageMargin={10}
      >
        {useMemo(
          () =>
            pages.map((page, index) => (
              <View
                testID="pager-view-content"
                key={page.key}
                style={page.style}
                collapsable={false}
              >
                <Text>{`page number ${index}`}</Text>
              </View>
            )),
          [pages]
        )}
      </AnimatedPagerView>
    </View >
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  PagerView: {
    flex: 1,
  },
});

Vega上不支持API

组件API

属性	描述	默认值
`initialPage`	设置组件首次挂载时显示的页面。	`0`
`onPageScroll`	用户滚动切换页面时触发的回调。	–
`onPageScrollStateChanged`	滚动状态发生变化时（空闲/拖动/缓冲）触发的回调。	–
`onPageSelected`	选中新页面时触发的回调。	–
`pageMargin`	用于设置页面边距。	–
`keyboardDismissMode`	确定键盘何时因拖动而隐藏。不适用于带有全屏键盘的设备。	无
`orientation`	设置滚动方向（`水平`或`垂直`）。	`水平`
`overScrollMode`	控制过度滚动动画。如果还有`过度拖动`，则以过度滚动优先，页面数量大于1时`自动`启用动画，`始终`无条件启用且`绝不会`无条件禁用；不影响方向键交互。	`自动`
`offscreenPageLimit`	当前页面两侧各保留的缓冲页数。	`3`
`过度拖动`	启用滚动越界动画。如无`overScrollMode`则生效；不影响方向键交互。	–
`layoutDirection`	控制文本和布局方向 (LTR/RTL)。原生组件不支持此属性，相关模式完全由原生实现处理。	–

方法

方法	描述
`setPage(index: number)`	滚动到带动画的指定页面。
`setPageWithoutAnimation(index: number)`	滚动到不带动画的指定页面。

Vega上的例外情况

Vega平台不支持scrollEnabled。
Vega平台不支持setScrollEnabled(scrollEnabled: boolean)。
如无overScrollMode，则不支持overDrag。
组件不支持layoutDirection，由Vega中的原生实现处理。

当使用方向键从嵌套PagerView内部的焦点元素进行导航时，按下与滚动轴垂直的方向键（例如在水平PagerView中按上/下键）可能会导致焦点跳转到外层PagerView的相邻页面，而非其外部的最近元素。

此行为仅出现在嵌套PagerView配置中，不会影响单层PagerView的使用。

支持的版本

NPM程序包版本	Vega SDK版本	Vega OS版本	React Native版本
~2.0.3	0.24	`操作系统1.2 (2101020054720)`	0.72、0.83

Last updated: 2026年7月10日

react-native-pager-view

安装

示例

Vega上不支持API

组件API

方法

Vega上的例外情况

带有嵌套PagerView的方向键导航

支持的版本