react native轮播图之'react-native-sw

react-native-swiper第三方组件的使用较为简单，提供源码仅供学习参考

代码中数据请求成功前展示<view>静态视图，数据请求成功动态赋值并刷新轮播图展示，并已处理点击跳转详情页的逻辑。

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    Image,
    TouchableOpacity,
    ViewPagerAndroid,
    Navigator,
    View,
    NativeModules,
    InteractionManager,
    } from 'react-native';

import Swiper from 'react-native-swiper';

var Dimensions = require('Dimensions');
var {width, height} = Dimensions.get('window');
var Push = NativeModules.PushNative;
var Util = require('../Common/Util');

class HomeBanner extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource:null
    };
  }
  render() {
    return (
      <View>
      {
        this.state.dataSource == null ?
        <View style={styles.slide}>
        </View>
      :
      <Swiper style={styles.wrapper} showsButtons={false} autoplay={true}>
        {this.renderSwiper()}
      </Swiper>
    }
    </View>
    );
  }
  // 渲染
  renderSwiper(){
    var itemArr = [];
    for (var i = 0; i < this.state.dataSource.length; i++) {
     let data = this.state.dataSource[i];
      itemArr.push(
        <View style={styles.slide} key={i}>
          <TouchableOpacity onPress={()=>this.pushNative('HomeBanner+'+data.link)}>
            <Image source={{uri:data.img_url}} style={styles.topImageStyle} />
          </TouchableOpacity>
        </View>
      );
    }
    return itemArr;
  }

  // 跳转原生应用
  pushNative(link){
    InteractionManager.runAfterInteractions(()=> {
        // RNOpenOneVC这个也是写在原生里面的再PushNative中
        Push.RNOpenOneVC(link);
    })
  }

  componentWillMount(){
    this.getBannerData();
  }

  getBannerData(){
    let Url = Server+ActivityUrl;
    this.GetNormal(Url,{'pageindex':'1','pagesize':'5'});
  }

  GetNormal(url,params){
          if (params) {
              let paramsArray = [];
              //拼接参数
              Object.keys(params).forEach(key => paramsArray.push(key + '=' + params[key]))
              if (url.search(/\?/) === -1) {
                  url += '?' + paramsArray.join('&')
              } else {
                  url += '&' + paramsArray.join('&')
              }
          }
          //fetch请求
          fetch(url,{
              method: 'GET',
          })
              .then((response) => response.json())
              .then((json) => {
                  console.log('json'+JSON.stringify(json));
                  this.setState({
                    dataSource: json.data
                  })
              })
              .catch((error) => {
                  //alert(error)
              })
      }
}

const styles = StyleSheet.create({
  wrapper: {
    height:140,
  },
  slide: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#9DD6EB',
  },
  topImageStyle: {
    width:width,
    height:140
  },
});


module.exports = HomeBanner;