ViewPager

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

Android

iOS

该库在 Expo SDK 参考中列出，因为它包含在 Expo 中。你可以将你选择的任何库与开发构建一起使用。

react-native-pager-view 公开了一个组件，该组件提供布局和手势以在内容页面之间滚动，例如轮播。

¥react-native-pager-view exposes a component that provides the layout and gestures to scroll between pages of content, like a carousel.

安装

¥Installation

Terminal

- npx expo install react-native-pager-view

If you are installing this in an existing React Native app (bare workflow), start by installing expo in your project. Then, follow the additional instructions as mentioned by library's README under "Installation in bare React Native projects" section.

用法

¥Usage

请参阅 callstack/react-native-pager-view 处的完整文档。

¥See full documentation at callstack/react-native-pager-view.

示例

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