ReactNative学习十二－React-Native-Viewpager

1.项目地址

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

2.Usage

1. Runnpm 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,monospace; padding:0.2em 0px; margin:0px">autoPlay:trueto turn page automatically,monospace; padding:0.2em 0px; margin:0px">isLoop:trueto run in infinite scroll mode,monospace; padding:0.2em 0px; margin:0px">locked:trueto disable touch scroll,monospace; padding:0.2em 0px; margin:0px">onChangePage: page change callback,monospace; padding:0.2em 0px; margin:0px">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) }); }} />

'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'
    },});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!