react-native-pager-view

オープンベータ版ドキュメント：本テクニカルドキュメントは、リリース前のオープンベータ版の一部としてAmazonから提供されるものです。ここで説明されている機能は、Amazonがフィードバックを受け取り、機能の開発を繰り返す過程で変更される可能性があります。最新の機能の情報については、最新のリリースノートを参照してください。

@amazon-devices/react-native-pager-viewは、サードパーティのPagerViewライブラリであるCallstackのPagerView（英語のみ）を、安定版のAPIを使用してKeplerでサポートします。

PagerViewコンポーネントでは、動的なビューを使用して簡単にページ分割を処理できます。これにより、ユーザーがデータのページを左右にスワイプできるようになります。

インストール

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>{`ページ番号${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`	ドラッグに応答してキーボードを閉じるかどうかを決定します。フルスクリーンキーボードを搭載したデバイスには適用されません。	none
`orientation`	スクロール方向（`horizontal`または`vertical`）を設定します。	`horizontal`
`overScrollMode`	オーバースクロールアニメーションを制御します。指定した場合、`overdrag`よりも優先されます。`auto`を指定すると、複数のページがある場合にアニメーションを有効にします。`always`を指定すると無条件で有効にし、`never`を指定すると無条件で無効にします。D-padによる操作には影響はありません。	`auto`
`offscreenPageLimit`	現在のページの前後にバッファーページとしてマウントしておくページ数です。	`3`
`overdrag`	境界を越えてスクロールしたときのアニメーションを有効にします。`overScrollMode`が指定されていない場合に適用されます。D-padによる操作には影響はありません。	-
`layoutDirection`	テキストとレイアウトの方向（LTR/RTL）を制御します。ネイティブコンポーネントではこのプロパティはサポートされません。代わりに、このモードは完全にネイティブ実装で処理されます。	-

メソッド

メソッド	説明
`setPage(index: number)`	指定したページまでアニメーション付きでスクロールします。
`setPageWithoutAnimation(index: number)`	指定したページまでアニメーションなしでスクロールします。

Vegaでの例外

Vegaプラットフォームでは、scrollEnabledはサポートされません。
Vegaプラットフォームでは、setScrollEnabled(scrollEnabled: boolean)はサポートされません。
overDragは、overScrollModeを指定しない場合にサポートされます。
layoutDirectionはコンポーネントではサポートされず、Vegaのネイティブ実装で処理されます。

入れ子になったPagerView内の要素にフォーカスがあり、そこからD-padを使用して移動する場合、ページャーのスクロール軸に対して垂直な方向（たとえば、横方向のPagerViewでは上または下）を押すと、現在の要素の外側にある最も近い要素ではなく、外側のPagerViewの隣接ページにフォーカスがジャンプすることがあります。

この動作は特にPagerViewが入れ子になった構成で発生し、PagerViewを単一レベルで使用する場合には影響はありません。

サポートされているバージョン

NPMパッケージのバージョン	Vega SDKバージョン	Vega OSバージョン	React Nativeバージョン
~2.0.3	0.24	`OS 1.2（2101020054720）`	0.72、0.83

Last updated: 2026年7月10日