react-native-ezswiper
source is simple, easy to use card swiper for React Native on iOS&android.
Installation
$ npm install react-native-ezswiper --save
Preview
Usage
import library:
;
simple swiper
<EZSwiper style=width: widthheight: 150backgroundColor: 'white' dataSource='0' '1' '2''3' width= width height=150 renderRow=thisrenderRow onPress=thisonPressRow />
card swiper
<EZSwiper style=width: widthheight: 150backgroundColor: 'white' dataSource=images width= width height=150 renderRow=thisrenderImageRow onPress=thisonPressRow ratio=0867 />
advanced
<EZSwiper style=width: widthheight: 150backgroundColor: 'white' dataSource='0' '1' '2''3' width= width height=150 renderRow=thisrenderRow onPress=thisonPressRow index=2 cardParams=cardSide:width*0867 cardSmallSide:150*0867cardSpace:width*1-0867/2*02 />
vertical swiper
<EZSwiper style=width: widthheight: 200backgroundColor: 'white' dataSource='0' '1' '2''3' width= width height=200 renderRow=thisrenderRow onPress=thisonPressRow ratio=0867 horizontal=false />
API
Props
key | type | default | description |
---|---|---|---|
width | PropTypes.number.isRequired | swiper width | |
height | PropTypes.number.isRequired | swiper height | |
index | PropTypes.number | 0 | initial index |
offset | PropTypes.number | 0 | initial left and right or up and down offsets |
horizontal | PropTypes.bool | true | swiper derection is horizontal |
loop | PropTypes.bool | true | swiper is loop |
autoplayTimeout | PropTypes.number | 5 | auto play mode (in second) |
autoplayDirection | PropTypes.bool | true | cycle direction control |
ratio | PropTypes.number | 1 | scaling ratio |
cardParams | PropTypes.object | {} | swiper card advanced object |
renderRow | PropTypes.func.isRequired | render card view | |
onPress | PropTypes.func | card is clicked action | |
onWillChange | PropTypes.func | next card will show | |
onDidChange | PropTypes.func | next card showed |
{cardSide,cardSmallSide,cardSpace}
cardParams is object:Function
function | description |
---|---|
scrollTo(index, animated = true) | scroll to position |
License
MIT License. © Zhu Yangjun 2017