react-native-ViewPage 轮播图

程序员说：所谓不坑不成神！

其实网上有很多react-native的轮播图插件。
比如：
react-native-swiper
react-native-scrollView
react-native-swiper2
react-native-viewpager
这里来分享一下react-native-viewpage。

1.运行安装

react-native-viewpager --save

注意：如果是windows环境，安装可能回出现警告，不过没关系，有些警告是因为安装IOS环境才导致的，不影响程序的正常运行。

2.代码实现

/**
 * 开发者：杜二红<1186969412@qq.com>
 * http://www.uminicmf.com
 * QQ:1186969412 微信：uminicmf
 */
'use strict';
import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Dimensions,
  Image,
} from 'react-native';
import ViewPager from 'react-native-viewpager';
let ImgWidth = Dimensions.get('window').width;
let ImgHeight = (Dimensions.get('window').height);
// alert(ImgWidth);
var IMGS = [
  'http://localhost:8081/img/banner01.png',
  'http://localhost:8081/img/banner01.png',
  'http://localhost:8081/img/banner01.png',
  'http://localhost:8081/img/banner01.png',
  'http://localhost:8081/img/banner01.png',
  'http://localhost:8081/img/banner01.png'
];
var TopScreen = React.createClass({
  getInitialState: function() {
    var dataSource = new ViewPager.DataSource({
      pageHasChanged: (p1, p2) => p1 !== p2,
    });
    return {
      dataSource: dataSource.cloneWithPages(IMGS),
    };
  },
  render: function() {
    return (
      <View style={{flex: 1}}>
        <ViewPager
          style={styles.viewpager}
          dataSource={this.state.dataSource}
          renderPage={this._renderPage}
          isLoop={true}
          autoPlay={true}/>
      </View>
    );
  },
  _renderPage: function(
    data: Object,
    pageID: number | string,) {
    return (
      <Image
        source={{uri: data}}
        style={styles.viewimg} />
    );
  },
});
var styles = StyleSheet.create({
  viewimg: {
    resizeMode: Image.resizeMode.cover,
    flex: 1,//让尺寸填满容器
  },
});
module.exports = TopScreen;