react-native-viewpager 轮播图

"react-native": "0.40.0"

import React from 'react'

import {

    StyleSheet,

    Dimensions,

    View,

    Button,

    Image,

    Text

} from 'react-native';

var ViewPager = require('react-native-viewpager');

var deviceWidth = Dimensions.get('window').width;

//本地图片

const IMGS = [

              require('../assets/selector_ok.png'),

              require('../assets/selectBack.png'),

              require('../assets/selector_cancle.png')

              ]

//网络图片

var NetIMGS = [
  'https://images.unsplash.com/photo-1441742917377-57f78ee0e582?h=1024',
  'https://images.unsplash.com/photo-1441716844725-09cedc13a4e7?h=1024',
  'https://images.unsplash.com/photo-1441448770220-76743f9e6af6?h=1024',
  'https://images.unsplash.com/photo-1441260038675-7329ab4cc264?h=1024',
  'https://images.unsplash.com/photo-1441126270775-739547c8680c?h=1024',
  'https://images.unsplash.com/photo-1440964829947-ca3277bd37f8?h=1024',
  'https://images.unsplash.com/photo-1440847899694-90043f91c7f9?h=1024'
];

class ImagePager extends React.Component {

    

    constructor(props) {

        super(props);

        var dataSource = new ViewPager.DataSource({

            pageHasChanged: (p1, p2) => p1 !== p2,

        });

        this.state = {

            dataSource: dataSource.cloneWithPages(NetIMGS)

        }

    }

    

    _renderPage(data, pageID) {

        return (

                <Image

                    source={data}

                    style={styles.page}

                />

                );

    }

    

    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'

                                 },

                                 });

export default ImagePager;