ViewPager

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

该库在 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

If you're installing this in a bare React Native app, you should also follow these additional installation instructions.

用法

¥Usage

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

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

示例

¥Example

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