用Hooks实现的高性能React-Native Swiper组件
原创用Hooks实现的高性能React-Native Swiper组件
原创
Github仓库: https://github.com/Voyzz/react-native-swiper-hooks
NPM仓库: https://www.npmjs.com/package/react-native-swiper-hooks
Hello, folks!
🦄 This is a powerful Swiper hooks component for React Native ✨ 为React Native开发的Swiper Hooks组件
undefined📚 Welcomes to provide your valuable comments or suggestions by 'Issues' or my contact information ✨ 欢迎通过”issues“或我的联系方式，为我提供宝贵意见
👨🏻💻 Powered by Voyz Shenundefined✨ Shanghai Jiao Tong University, Ctrip
Catalog
<span id='howtouse'><span>
How to use
- installation npm i react-native-swiper-hooks --save
- import import Swiper from 'react-native-swiper-hooks'
- Useage
...
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
<span id='demo'><span>
Demo
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 ↓
<span id='properties'><span>
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 |
容器背景颜色 | ||||
initIndex | 0 | / | Number | Index of the init child |
初始页 | ||||
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 |
到达首尾时是否可以弹性拉动一截 |
- 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
<span id='functions'><span>
- 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 |
结束拖动时的回调函数 |
<span id='versions'><span>
Versions
v1.2.0 添加新功能 允许swiper内子元素尺寸与容器尺寸不同
v1.1.3 性能优化 修复页码器更新延迟
bug修复 修复循环模式下翻页至页尾时的bug
v1.1.2 更新文档
v1.1.1 bug修复 修复安卓循环模式下翻页闪屏问题
v1.1.0 组件项目迁移
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
