Hello, folks! 
🦄 This is a powerful Swiper hooks component for React Native
✨ 为React Native开发的Swiper Hooks组件
📚 Welcomes to provide your valuable comments or suggestions by 'Issues' or my contact information
✨ 欢迎通过”issues“或我的联系方式，为我提供宝贵意见
👨🏻💻 Powered by Voyz Shen ✨ Shanghai Jiao Tong University, Ctrip
Catalog
How to use
- installation
npm i react-native-swiper-hooks --save- import
import Swiper from 'react-native-swiper-hooks'- use it
...
const _renderList = ()=>{
let listData = [
{
title:'1',
bgColor:'#f00'
},
{
title:'2',
bgColor:'#0f0'
},
{
title:'3',
bgColor:'#00f'
},
]
return (
listData.map((item,idx)=>{
return (
<View style={{width:WIDTH,height:300,backgroundColor:item.bgColor,justifyContent: 'center',alignItems: 'center'}} key={idx}>
<Text>{item.title}</Text>
</View>
)
})
)
}
...
<Swiper height={300}
autoplay={true}
loop={true}
showPagination={true}
>
{_renderList()}
</Swiper>
...- update
npm update react-native-swiper-hooks
Demo
transform-mode ↓
width={WIDTH}
autoplay={false}
initIndex={0}
loop = {false}
showPagination = {false}
transformMode={true}
transformModeMinSize={174}
transformModeMaxSize={_rightViewHeight}autoplay ↓
height={300}
paginationSelectedColor={'#CCFF66'}
autoplay={true}
loop={true}
showPagination={true}
direction={'row'}non-autoplay ↓
height={300}
paginationSelectedColor={'#CCFF66'}
autoplay={false}
loop={true}
showPagination={true}
direction={'row'}non-loop ↓
height={300}
paginationSelectedColor={'#CCFF66'}
autoplay={false}
loop={false}
showPagination={true}
direction={'row'}vertical scrolling ↓
height={300}
paginationPosition={'left'}
paginationSelectedColor={'#CCFF66'}
autoplay={true}
loop={true}
showPagination={true}
direction={'column'}diff Size ↓
height={300}
childWidth={WIDTH-100}
paginationSelectedColor={'#CCFF66'}
autoplay={true}
loop={true}
showPagination={true}
direction={'row'}
(child:{width=WIDTH-100})init Index ↓
height={300}
initIndex={1}
showPagination={false}
Properties
- Basic -
| Prop | Default | Options | Type | Description |
|---|---|---|---|---|
| width | [width of screen] | / | Number | Width of the Swiper container |
| 容器宽度 | ||||
| height | [height of screen] | / | Number | Height of the Swiper container |
| 容器高度 | ||||
| childWidth | / | / | Number | Width of the child component（when width of container and child component） |
| 子元素宽度（当子元素宽度与容器宽度不同时传此参数） | ||||
| childHeight | / | / | Number | Width of the child component（when height of container and child component） |
| 子元素高度（当子元素宽度与容器高度不同时传此参数） | ||||
| boxBackgroundColor | / | / | Color | Background color of the Swiper container |
| 容器背景颜色 | ||||
| outerContainerStyle | {} | / | Object | style of the outer container |
| 外层容器样式 | ||||
| initIndex | 0 | / | Number | Index of the init child |
| 初始页 | ||||
| scrollToIndex | 0 | / | Number | scroll to the child |
| 参数控制滚动至某子元素 | ||||
| scrollToIndexWithAnimate | false | true/false | Boolean | scroll to the child with Animtion |
| 参数控制滚动至某子元素时是否开启动画 | ||||
| scrollDuration | 300 | / | Number | (Android only)Duration (ms) on page turning |
| 翻页滚动持续时间 | ||||
| direction | 'row' | 'row' / 'column' | String | Direction of the scrolling |
| 滚动方向 | ||||
| minOffset | 10 | / | Number | Threshold of scroll distance for page turning |
| 翻页的滚动阈值 | ||||
| autoplay | true | true / false | Boolean | Enable autoplay |
| 是否自动播放 | ||||
| loop | true | true / false | Boolean | Enable loop mode |
| 是否循环滚动 | ||||
| autoplayGapTime | 3 | / | Number | second between autoplay transitions |
| 自动播放时间间隔 | ||||
| autoplayDirection | true | true / false | Boolean | Enable forward direction when autoplay |
| 是否正向自动播放 | ||||
| scrollEnabled | true | true / false | Boolean | Enable hand-rolling |
| 是否可以手动滚动 | ||||
| animated | true | true / false | Boolean | Enable smooth scrolling animation |
| 是否开启滚动动画 | ||||
| bounces | true | true / false | Boolean | Enable pull flexibly when you scroll to the head and tail |
| 到达首尾时是否可以弹性拉动一截 | ||||
| transformMode | false | true / false | Boolean | In this mode,size will change between transformModeMinSize and transformModeMaxSize while scrolling |
| 是否开启变形模式 | ||||
| transformModeMinSize | [height of screen] | / | Number | (transformMode = true only) min size |
| 变形模式下最小尺寸 | ||||
| transformModeMaxSize | [height of screen] | / | Number | (transformMode = true only) max size |
| 变形模式下最大尺寸 |
- Pagination -
| Prop | Default | Options | Type | Description |
|---|---|---|---|---|
| showPagination | true | true / false | Boolean | Enable pagination shower |
| 是否显示页码器 | ||||
| paginationDirection | 'bottom' | 'bottom' / 'top' / 'left' / 'right' | String | Position of the pagination |
| 页码器位置 | ||||
| paginationOffset | 5 | / | Number | Distance between pagination shower and side |
| 页码器距边距离 | ||||
| paginationUnselectedSize | 6 | / | Number | Size of the point (non-current) |
| 提示点大小（非当前页） | ||||
| paginationSelectedSize | 10 | / | Number | Size of the point (current) |
| 提示点大小（当前页） | ||||
| paginationUnselectedColor | '#FFFFFF' | / | Color | Color of the point (non-current) |
| 提示点颜色（非当前页） | ||||
| paginationSelectedSize | '#000000' | / | Color | Color of the point (current) |
| 提示点颜色（当前页） |
Functions
- callback -
| Func | Params | Type | Description |
|---|---|---|---|
| onPaginationChange | index | Number | Retrun the index of current page when it changes |
| 页码改变时返回当前页码索引 | |||
| onScrollBeginDrag | nativeEvent | Object | Callback on scroll begin drag |
| 开始拖动时的回调函数 | |||
| onScrollEndDrag | nativeEvent | Object | Callback on scroll end drag |
| 结束拖动时的回调函数 | |||
| getScrollDistance | / | int | get distance on scrolling |
| 获取手动滚动距离 | |||
| getChildrenOnPageinationChange | / | int | get JSX Array of Children |
| 获取JSX数组 | |||
| getTransformModeCurrSize | / | int | get current size in transform-mode |
| 变形模式下获取尺寸值 |
Versions
- v1.3.8
[优化] 安卓不触发onScrollEndDrag时增加防抖逻辑
- v1.3.5
[添加新参数] outerContainerStyle: 外层容器样式
- v1.3.4
[添加新参数] scrollToIndexWithAnimate:参数控制滚动至某子元素时是否开启动画
- v1.3.0
[bug修复]【安卓】防止滑动停止未触发_onScrollEndDrag
- v1.3.0
[新功能] 添加变形模式
- v1.2.9
[bug修复] scrollto参数保护
- v1.2.8
[修复] getScrollDistance纵向滚动距离修复
- v1.2.6
[添加新参数] (安卓) scrollDuration: 翻页滚动持续时间
- v1.2.5
[性能优化] 手动滚动时暂停自动滚动的计时器
- v1.2.4
[性能优化] 避免scrollToIndex与自动播放的冲突
- v1.2.3
[添加新方法] getChildrenOnPageinationChange获取JSX数组
- v1.2.2
[添加新参数] scrollToIndex参数控制滚动至某子元素
- v1.2.1
[添加新方法] 获取手动滚动距离 [性能优化] 优化手动滚动时与自动滚动的冲突
- v1.2.0
[添加新功能] 允许swiper内子元素尺寸与容器尺寸不同
- v1.1.3
[性能优化] 修复页码器更新延迟
[bug修复] 修复循环模式下翻页至页尾时的bug
- v1.1.2
更新文档
- v1.1.1
[bug修复] 修复安卓循环模式下翻页闪屏问题
- v1.1.0
组件项目迁移