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

react-native-pager-view

一个组件库，提供类似轮播的视图，用于滑动浏览页面内容。

Android

iOS

Included in Expo Go

GitHub

npm

重要 @expo/ui 提供了一个可直接替换的实现，适用于 react-native-pager-view，在 Android 上由 Jetpack Compose 提供支持，在 iOS 上由 SwiftUI 提供支持。

react-native-pager-view 暴露了一个组件，提供用于在页面内容之间滚动的布局和手势，就像轮播图一样。

安装

Terminal

- npx expo install react-native-pager-view

If you are installing this in an existing React Native app, make sure to install expo in your project. Then, follow the installation instructions provided in the library's README or documentation.

示例

App.js

import { StyleSheet, View, Text } from 'react-native';
import PagerView from 'react-native-pager-view';

export default function MyPager() {
  return (
    <View style={styles.container}>
      <PagerView style={styles.container} initialPage={0}>
        <View style={styles.page} key="1">
          <Text>第一页</Text>
          <Text>向右滑动 ➡️</Text>
        </View>
        <View style={styles.page} key="2">
          <Text>第二页</Text>
        </View>
        <View style={styles.page} key="3">
          <Text>第三页</Text>
        </View>
      </PagerView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  page: {
    justifyContent: 'center',
    alignItems: 'center',
  },
});

了解更多

访问官方文档

获取有关 API 及其用法的完整信息。