React-Native-Whc-Banner是一个轻量级、高度可自定义的轮播组件，它可以完美地支持iOS和Android平台。该组件提供了多种选项，使您可以根据自己的需求来创建独特的轮播效果。
特性
- 支持图片、文本、自定义视图等各种类型的内容；
- 可以自定义轮播动画样式；
- 支持循环滚动和手动滑动；
- 支持自定义分页指示器；
- 具有高度的灵活性和可扩展性。
安装
npm install react-native-whc-banner --save
使用方法
-- -------------------- ---- -------
------ --------- ---- --------------------------
----------
-------- ------- --- --
-------
- ---- ------------------------------------ --
- ---- ------------------------------------ --
- ---- ------------------------------------ --
--
-------------- ----- ----- -- -- -
------
--------- ---- -------- --
-------- ------ ------- ------- ------ --
--
--
--API
| Prop | Type | Default | Description |
|---|---|---|---|
data |
Array |
[] |
数据源 |
renderItem |
function |
undefined |
轮播项渲染函数 |
autoplay |
bool |
true |
是否自动轮播 |
loop |
bool |
true |
是否循环滚动 |
interval |
number |
3000 |
轮播间隔时间 |
index |
number |
0 |
初始索引位置 |
paginationStyle |
object |
{} |
分页标识器的样式 |
dotStyle |
object |
{} |
单个分页指示器的样式 |
activeDotStyle |
object |
{} |
激活的分页指示器的样式 |
onPress |
function |
undefined |
当用户点击某个轮播项时调用的回调函数 |
onIndexChanged |
function |
undefined |
当轮播项索引发生变化时调用的回调函数 |
containerStyle |
object |
{} |
轮播组件容器的样式 |
示例
1. 默认轮播效果
-- -------------------- ---- -------
----------
-------- ------- --- --
-------
- ---- ------------------------------------ --
- ---- ------------------------------------ --
- ---- ------------------------------------ --
--
-------------- ----- ----- -- -- -
------
--------- ---- -------- --
-------- ------ ------- ------- ------ --
--
--
--2. 自定义分页指示器样式
-- -------------------- ---- -------
----------
-------- ------- --- --
-------
- ---- ------------------------------------ --
- ---- ------------------------------------ --
- ---- ------------------------------------ --
--
-------------- ----- ----- -- -- -
------
--------- ---- -------- --
-------- ------ ------- ------- ------ --
--
--
----------- ---------------- ------- ------ --- ------- --- ------------- -- ----------------- - --
----------------- ---------------- ------- ------ --- ------- --- ------------- -- ----------------- - --
--3. 自定义轮播动画
-- -------------------- ---- ------- ------ - -------- - ---- --------------- ----- ----- - --- ------------------ ---------- -------- ------- --- -- - ---------------------------------------------------------- -------- --------------------------------------------------------------------------------
