efunbox-mobile-8/pages/components/Swiper.js

/* 
 * @param：
 *    autoPlay: 是否自动播放；
 *    loop: 是否循环，无缝滚动
 *    ifShowMiddle: 轮播图是否从中间的索引开始
 * @todo: 首页轮播图和主题适用
 */

import React, { Component } from "react";
import {
  StyleSheet,
  View,
  Image
} from "react-native";

import Dimensions from '../utils/dimensions';
import Swiper from "react-native-swiper";

const dotRegular = <View style={{ borderColor: '#fff', borderWidth: 2, width: 8, height: 8, borderRadius: 4, marginLeft: 5, marginRight: 5, marginBottom: -20, }} />;
const dotActive = <View style={{ backgroundColor: '#fff', width: 8, height: 8, borderRadius: 4, marginLeft: 5, marginRight: 5, marginBottom: -20, }} />;
export default class Swipers extends Component {

  render() {
    console.log(this.props)
    return (
      <Swiper
        style={styles.wrapper}
        horizontal={true}
        autoplayTimeout={5}
        autoplay={this.props.autoplay}
        loop={this.props.loop}
        index={this.props.ifShowMiddle ? 1 : 0}
        activeDotColor="#fff"
        showsPagination={true}
        dot={dotRegular}
        activeDot={dotActive}
      >
        {
          this.props.data.map((item, index) => {
            return (
              <View style={styles.slide} key={index}>
                <Image
                  source={{
                    uri: item.boothContent
                  }}
                  style={styles.img}
                />
              </View>
            )
          })
        }
      </Swiper>
    );
  }
}

const styles = StyleSheet.create({
  wrapper: {
    // flex: 1,
  },
  slide: {
    width: Dimensions.getDp(352),
    height: Dimensions.getDp(153),
    marginHorizontal: Dimensions.getDp(3),
    zIndex: 1
  },
  img: {
    width: Dimensions.getDp(352),
    height: Dimensions.getDp(153),
    borderRadius: Dimensions.getDp(10),
    zIndex: 1
  }
});