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：

import EZSwiper from 'react-native-ezswiper';

simple swiper

<EZSwiper style={{width: width,height: 150,backgroundColor: 'white'}}
          dataSource={['0', '1' ,'2','3']}
          width={ width }
          height={150 }
          renderRow={this.renderRow}
          onPress={this.onPressRow}                      
          />

card swiper

<EZSwiper style={{width: width,height: 150,backgroundColor: 'white'}}
           dataSource={images}
           width={ width }
           height={150 }
           renderRow={this.renderImageRow}
           onPress={this.onPressRow} 
           ratio={0.867}                    
                    />

advanced

<EZSwiper style={{width: width,height: 150,backgroundColor: 'white'}}
                    dataSource={['0', '1' ,'2','3']}
                    width={ width }
                    height={150 }
                    renderRow={this.renderRow}
                    onPress={this.onPressRow} 
                    index={2}                
                    cardParams={{cardSide:width*0.867, cardSmallSide:150*0.867,cardSpace:width*(1-0.867)/2*0.2}}  
                    />

vertical swiper

<EZSwiper style={{width: width,height: 200,backgroundColor: 'white'}}
          dataSource={['0', '1' ,'2','3']}
          width={ width }
          height={200 }
          renderRow={this.renderRow}
          onPress={this.onPressRow} 
          ratio={0.867} 
          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 |

cardParams is object：{cardSide,cardSmallSide,cardSpace}

Function

| function | description |
| --- | --- | | scrollTo(index, animated = true) | scroll to position |

License

MIT License. © Zhu Yangjun 2017