介绍
react-native-caroussel-pager 是一个 React Native 的轮播图组件。它可以实现多张图片的水平滑动切换，支持自动播放、无限循环、手势滑动等功能。在开发 React Native 应用的过程中，轮播图是比较常见的一个组件。因此，学习如何使用 react-native-caroussel-pager 是非常有必要的。
安装
在终端中进入你的工程目录，运行以下命令安装 react-native-caroussel-pager：
npm install react-native-caroussel-pager --save
使用
在你的 React Native 应用中引入组件以及样式文件：
import CarouselPager from 'react-native-caroussel-pager';
import { StyleSheet } from 'react-native';我们可以这样编写一个基本的轮播图：
-- -------------------- ---- -------
-------- -
----- ------ - -
- ---- --------------------------------- --
- ---- --------------------------------- --
- ---- --------------------------------- --
- ---- --------------------------------- -
--
------ -
--------------
---------------
---------------
------------
-----------------------
--
--
-
----- ------ - -------------------
--------- -
------- ---
-
---运行上述程序，你就可以得到一个基本的轮播图了。
API
Props
以下是组件的可用属性：
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| images | array | [] | 轮播图的数据源 |
| autoplay | bool | false | 是否自动播放 |
| delay | number | 3000 | 自动播放时图片切换的间隔时间 |
| loop | bool | false | 是否循环滚动 |
| index | number | 0 | 初始展示的图片下标 |
| width | number | 设备屏幕宽度 | 轮播图的宽度 |
| height | number | 设备屏幕高度/3 | 轮播图的高度 |
| paginationStyle | style | { bottom: 5 } | 分页器的样式 |
| renderPageIndicator | func | null | 渲染分页器的方法 |
Methods
| 名称 | 描述 |
|---|---|
| goNext() | 切换到下一个图片 |
| goPrev() | 切换到上一个图片 |
| goIndex(index: number) | 切换到指定下标的图片 |
| startAutoplay() | 启动自动播放 |
| stopAutoplay() | 停止自动播放 |
示例
下面的程序展示了如何在一个轮播图周围包裹一个高亮边框：
-- -------------------- ---- -------
-------- -
----- ------ - -
- ---- --------------------------------- --
- ---- --------------------------------- --
- ---- --------------------------------- --
- ---- --------------------------------- -
--
------ -
----- -------------------------
----- ----------------------
--------------
---------------
---------------
------------
-----------------------
--
-------
-------
--
-
----- ------ - -------------------
---------- -
----- --
--------------- ---------
----------- --------
--
------- -
------------ --
------------ ---------
--
--------- -
------- ---
-
---总结
本文介绍了如何使用 react-native-caroussel-pager 实现轮播图组件，并详细说明了组件的属性和方法。希望读者通过本文的学习能够在 React Native 的开发中轻松构建轮播图组件，并为读者提供了针对轮播图组件的编程思路。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055f4e81e8991b448dcd2f