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() {
    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}
      >
        <View style={styles.slide}>
          <Image
            source={{
              uri:
                "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1295208965,3056573814&fm=26&gp=0.jpg"
            }}
            style={styles.img}
          />
        </View>
        <View style={styles.slide}>
          <Image
            source={{
              uri:
                "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1295208965,3056573814&fm=26&gp=0.jpg"
            }}
            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
  }
});