react-native-pager-view

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

Android

iOS

Included in Expo Go

GitHub

npm

Recommended version:

9.0.4

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

react-native-pager-view 提供了一个组件，用于实现滚动浏览内容页面时所需的布局和手势，例如轮播图

安装

Terminal

- npx expo install react-native-pager-view

- yarn expo install react-native-pager-view

- pnpm expo install react-native-pager-view

- bun 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>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',
  },
});

了解更多

访问官方文档

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