react-native-pager-view

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

Android

iOS

Included in Expo Go

Recommended version:

8.0.2

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

react-native-pager-view 提供了一个组件，该组件能够布局并支持手势操作，在内容页面之间滚动，就像轮播图一样。

安装

🌐 Installation

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.

示例

🌐 Example

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>First page</Text>
          <Text>Swipe ➡️</Text>
        </View>
        <View style={styles.page} key="2">
          <Text>Second page</Text>
        </View>
        <View style={styles.page} key="3">
          <Text>Third page</Text>
        </View>
      </PagerView>
    </View>
  );
}

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

了解更多

🌐 Learn more

访问官方文档

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