在移动端开发中，轮播图组件是最常见的 UI 控件之一，而在 React Native 开发中，React Native Gallery Carousel 是一个非常实用的轮播图组件，可以帮助我们快速地搭建一个轮播图效果。本文将介绍如何使用 npm 包 react-native-galery-carousel。
安装
首先，需要在命令行中使用 npm 进行安装：
npm install react-native-gallery-carousel --save
使用
导入
在页面中使用轮播图组件前，需要先导入：
import Carousel from 'react-native-gallery-carousel';
引入图片
在 constructor 中，引入图片：
-- -------------------- ---- -------
-------------------
------------
---------- - -
------- -
- ------- ----------------------------- --
- ------- ----------------------------- --
- ------- ----------------------------- --
- ------- ----------------------------- --
- ------- ----------------------------- --
- ------- ----------------------------- --
- ------- ----------------------------- --
-
-
-在 render 中使用 Carousel
在 render 中使用 Carousel：
-- -------------------- ---- -------
-------- -
------ -
----- -------- ----- - ---
---------
-------- ----- - --
--------------------------
--------------------- -- - ------------------ --
---------------
--
-------
--
-参数说明
images
images 参数是一个数组，其中每个对象代表一个图片：
-- -------------------- ---- ------- - - ------- ----------------------------- -- - ------- ----------------------------- -- - ------- ----------------------------- -- - ------- ----------------------------- -- - ------- ----------------------------- -- - ------- ----------------------------- -- - ------- ----------------------------- -- -
initialPage
initialPage 参数是一个数值，代表初始化时展现第几张图片，默认值为 0。
onPageChanged
onPageChanged 参数是一个函数，当图片切换时触发，返回当前展现的图片索引。
style
style 参数是一个对象，用于设置 Carousel 的样式。
示例代码
完整的使用实例代码如下：
-- -------------------- ---- -------
------ -------- ---- --------------------------------
------ ------ - --------- - ---- -------
------ ------ ---- --------------
------ ------- ----- --- ------- --------- -
-------------------
------------
---------- - -
------- -
- ------- ----------------------------- --
- ------- ----------------------------- --
- ------- ----------------------------- --
- ------- ----------------------------- --
- ------- ----------------------------- --
- ------- ----------------------------- --
- ------- ----------------------------- --
-
-
-
-------- -
------ -
----- -------- ----- - ---
---------
-------- ----- - --
--------------------------
--------------------- -- - ------------------ --
---------------
--
-------
--
-
-总结
React Native Gallery Carousel 是一个非常实用的轮播图组件，可以帮助我们快速地搭建一个轮播图效果。本文介绍了如何使用这个组件，并提供了示例代码。希望读者可以根据本文的介绍，快速地实现一个轮播图组件，并且掌握 React Native 开发中的技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055aa681e8991b448d8251