简介
@remobile/react-native-card-swiper 是一款专为 React Native 打造的卡片轮播组件，可以方便快捷的实现多种效果的轮播展示。
安装
可以通过 npm 安装 @remobile/react-native-card-swiper ，运行以下命令即可：
npm install @remobile/react-native-card-swiper --save
使用
引入组件
在需要使用组件的文件中引入：
import React, { Component } from 'react';
import { View } from 'react-native';
import { CardSwiper } from '@remobile/react-native-card-swiper';基本用法
下面演示一个基本的使用例子，可以上下滑动来看到所有的卡片：
-- -------------------- ---- -------
------ ------- ----- ----------------- ------- --------- -
-------- -
----- ---- - -
------- ------ ------- ------------------------
------- ------ ------- ------------------------
------- ------ ------- ------------------------
--
------ -
------------
---------------- ------ -- -
----- ----------- ------------- -- -------------- --------
------ -------------------- ------------- -- ------- ---------- ------ ----------- ----------------------
-------
---
-------------
--
-
-上面的代码，通过 data 数组来定义卡片的信息，包括每张卡片的标题和图片，然后使用 map 方法来将数组映射到 CardSwiper 组件中，这样就可以将每个卡片展示出来。
高级用法
@remobile/react-native-card-swiper 支持多种效果的轮播展示，具体可以通过属性进行配置，下面是一个高级用法的演示例子：
-- -------------------- ---- -------
------ ------- ----- ----------------- ------- --------- -
-------- -
----- ---- - -
------- ------ ------- ------------------------
------- ------ ------- ------------------------
------- ------ ------- ------------------------
--
------ -
-----------
------------
----------------------------------------- - ---
------------------------------------------- - ----
-----------------
------------
-
---------------- ------ -- -
----- ------------
------ -------------------- -------------- ---------- ------- ---------- ----- --- --------------------
----- ----------------- ----------- ------- -- ----- --- ------ --- ---------------- ------------------ -------- -----
----- -------------- ----------------------------
-------
-------
---
-------------
--
-
-上面的代码，通过配置一些属性，比如 cardsNum 来设置同时展示的卡片数，cardWidth 和 cardHeight 来设置卡片的宽高，marginBottom 来设置轮播组件底部的间隔，loop 来设置是否循环轮播等等。
API
@remobile/react-native-card-swiper 可以使用以下属性来配置轮播效果：
| Property | Type | Default | Description |
|---|---|---|---|
| cardsNum | number | 1 | 同时展示的卡片数量 |
| cardWidth | number | screen width - 60 | 卡片的宽度 |
| cardHeight | number | screen height - 260 | 卡片的高度 |
| marginBottom | number | 40 | 轮播组件底部的间隔 |
| loop | boolean | true | 是否循环轮播 |
结语
通过本文的介绍，相信读者已经可以学会如何使用 @remobile/react-native-card-swiper 组件，并且了解了该组件的基本用法和高级用法，希望本文对你们的学习有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cbf81e8991b448e637c