ReactNative学习十二－React-Native-Viewpager

最新推荐文章于 2026-04-27 09:29:26 发布

转载最新推荐文章于 2026-04-27 09:29:26 发布 · 置顶 · 1.3w 阅读

收录于

react native

本文介绍如何使用 React Native 的 ViewPager 库实现轮播效果。详细解释了安装步骤、配置选项及过渡动画设置，并提供了完整的代码示例。

1.项目地址

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

2.Usage

Run npm install react-native-viewpager --save
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'
    },
});

标签

#react native