Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-native-ezswiper with all npm packages installed. Try it out:

var reactNativeEzswiper = require("react-native-ezswiper")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-native-ezswiper v1.3.0

Swiper component for React Native.

react-native-ezswiper

中文文档

NPM version release GitHub license

source is simple, easy to use card swiper for React Native on iOS&android.

Installation

$ npm install react-native-ezswiper --save

Preview

showios showandroid

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

keytypedefaultdescription
widthPropTypes.number.isRequiredswiper width
heightPropTypes.number.isRequiredswiper height
indexPropTypes.number0initial index
offsetPropTypes.number0initial left and right or up and down offsets
horizontalPropTypes.booltrueswiper derection is horizontal
loopPropTypes.booltrueswiper is loop
autoplayTimeoutPropTypes.number5auto play mode (in second)
autoplayDirectionPropTypes.booltruecycle direction control
ratioPropTypes.number1scaling ratio
cardParamsPropTypes.object{}swiper card advanced object
renderRowPropTypes.func.isRequiredrender card view
onPressPropTypes.funccard is clicked action
onWillChangePropTypes.funcnext card will show
onDidChangePropTypes.funcnext card showed

cardParams is object:{cardSide,cardSmallSide,cardSpace}

cardParams

Function

functiondescription
scrollTo(index, animated = true)scroll to position

License

MIT License. © Zhu Yangjun 2017

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free