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";

export default class Swipers extends Component {
  render() {
    return (
      <View style={styles.Carousel}>
        <Swiper
          style={{ flex: 1 }}
          horizontal={true}
          autoplayTimeout={5}
          autoplay={this.props.autoplay}
          loop={this.props.loop}
          index={this.props.ifShowMiddle ? 1 : 0}
          activeDotColor="#fff"
          showsPagination={false}
        >
          <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>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  Carousel: {
    // width: '100%',
    // height: 153,
    flex:1,
    borderRadius: 10,
    overflow: 'hidden'
  },
  wrapper: {
    width: '100%'
  },
  slide: {
    width: 352,
    height: 153,
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 10,
    marginHorizontal:6
  },
  img: {
    width: 352,
    height: 153,
    borderRadius: 10
  }
});