ReactNative学习十二－React-Native-Viewpager

1.项目地址

https://github.com/race604/react-native-viewpager

2.Usage

1. Run npm install react-native-viewpager --save
2. Code like this:

var ViewPager = require('react-native-viewpager');<ViewPager    dataSource={this.state.dataSource}    renderPage={this._renderPage}/>

More configuration

• dataSource: this is require to provide pages data,
• renderPage: this is require to render page view,
• autoPlay: true to turn page automatically,
• isLoop: true to run in infinite scroll mode,
• locked: true to disable touch scroll,
• onChangePage: page change callback,
• renderPageIndicator: render custom ViewPager indicator.  

Page Transition Animation Controls

• animation: function that returns a React Native Animated configuration.

Example:

var ViewPager = require('react-native-viewpager');<ViewPager    dataSource={this.state.dataSource}    renderPage={this._renderPage}    animation = {(animatedValue, toValue, gestureState) => {    // Use the horizontal velocity of the swipe gesture    // to affect the length of the transition so the faster you swipe    // the faster the pages will transition    var velocity = Math.abs(gestureState.vx);    var baseDuration = 300;    var duration = (velocity > 1) ? 1/velocity * baseDuration : baseDuration;    return Animated.timing(animatedValue,    {      toValue: toValue,      duration: duration,      easing: Easing.out(Easing.exp)    });  }}/>

3.效果图

4.实例代码

'use strict';import React, {    Component,    View,    Image,    Dimensions,    StyleSheet} from 'react-native';import ViewPager from 'react-native-viewpager';var deviceWidth = Dimensions.get('window').width;const BANNER_IMGS = [    require('./images/banner/1.jpg'),    require('./images/banner/2.jpg'),    require('./images/banner/3.jpg'),    require('./images/banner/4.jpg')];export default class MyViewPager extends React.Component {    constructor(props) {        super(props);        // 用于构建DataSource对象        var dataSource = new ViewPager.DataSource({            pageHasChanged: (p1, p2) => p1 !== p2,        });        // 实际的DataSources存放在state中        this.state = {            dataSource: dataSource.cloneWithPages(BANNER_IMGS)        }    }    _renderPage(data, pageID) {        return (            <Image                source={data}                style={styles.page}/>        );    }    /**    dataSource: 提供页面数据,    renderPage: 用于渲染页面视图,    autoPlay: 为true 将自动播放,    isLoop: 为true支持循环播放,    locked: 为true禁止触摸滚动,    onChangePage: 页面变化的回调,    renderPageIndicator: 渲染自定义的 ViewPager indicator.    */    render() {        return (            <View style={styles.container}>                  <ViewPager                    style={{height:130}}                    dataSource={this.state.dataSource}                    renderPage={this._renderPage}                    isLoop={true}                    autoPlay={true}/>            </View>        );    }}const styles = StyleSheet.create({    container: {        flex: 1,        flexDirection: 'row',        alignItems: 'flex-start',        paddingTop:5,        paddingLeft:5,        backgroundColor:'#999999',        paddingRight:5,        paddingBottom:5,    },    page: {    width: deviceWidth,//设备宽(只是一种实现，此处多余)        flex: 1,        height: 130,        resizeMode: 'stretch'    },});