共计 3852 个字符,预计需要花费 10 分钟才能阅读完成。
Github 仓库 : https://github.com/Voyzz/reac…
NPM 仓库 : https://www.npmjs.com/package…
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
- Demo
- Properties
- Functions
- Versions
<span id=’howtouse’><span>
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
<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 ↓
height={300}
initIndex={1}
showPagination={false}
<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
组件我的项目迁徙
正文完
发表至: react-native
2020-09-21