【React Native开发】 - ViewParger轮播组件

首先，需要组件的配置安装：

导入组件：

import ViewPager from 'react-native-viewpager'

组件的配置：

dataSource:数据源

renderPager：渲染页面，页面显示的内容

isLoop：是否循环显示

autoPlay：是否自动轮播

locked:设置禁止触摸滚动

onChangePager:页面切换时的回调函数

renderPagerIndicator:渲染指示器

animation:渲染页面时的动画

案例操作：

import React,{Component} from  'react'
import {
    StyleSheet,
    View,
    Text,
    Image,
    Dimensions,
    Animated,
 } from 'react-native'

import ViewPager from 'react-native-viewpager'

const width = Dimensions.get('window').width
const height = Dimensions.get('window').height

const IMG = [require('./images/ic_anhui_huangshan.jpg'),
    require('./images/ic_beijing_gugong.jpg'),
    require('./images/ic_guangdong_guangzhou.jpg'),
    require('./images/ic_guangxi_guizhou.jpg')];

export default class Root extends Component{
   constructor(props){
       super(props)
       const dataSource = new ViewPager.DataSource({pageHasChanged:(p1,p2) => p1 != p2})
       this.state = {
           dataSource:dataSource.cloneWithPages(IMG)
       }
   }
    _renderPager(data,pageID){
        return (
            <Image
                style={styles.imageStyle}
                source={data}>
            </Image>
        )
    }
    render(){
        return (
            <View style={styles.container}>
                <ViewPager
                 style={styles.pagerStyle}
                    dataSource={this.state.dataSource}
                    renderPage={this._renderPager}
                    isLoop={true}
                    autoPlay={true}
                    animation = {(animatedValue, toValue, gestureState) => {
                    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)
                    });
                 }}>
                </ViewPager>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container:{
        flex:1
    },
    pagerStyle:{
        height:height/3,
        width:width,
    },
    imageStyle:{
        flex:1,
        height: height/3,
        resizeMode: 'stretch'
    },
})
运行结果：