React-Native react-native-swipe

react-native-swiper轮播图，是我们开发中特别常见的效果，感谢编写react-native-swiper的大神，让我们方便了很多啊，今天小萌总结一下用法以及遇到的问题。

一、安装 react-native-swiper两种方法

yarn add react-native-swiper
//或者
npm install --save react-native-swiper
查看 npm view react-native-swiper
删除 npm rm react-native-swiper --save

二、属性介绍

(1)基本属性

• horizontal bool

默认true,如果为true，滚动方向是横向的，如果为false，滚动方向是竖向的

• loop bool
  默认true,如果为true，循环播放，如果为false，不循环播放

• index number
  默认0 表示从第一个界面开始循环，标识为0

• showsButtons bool
  默认false 是否显示控制按钮（即左右两侧的箭头是否可见）

• autoPlay bool
  默认false 是否自动轮播

• onIndexChanged func(函数)
  (index)=>null 当用户拖拽时更新索引调用

(2)基本布局

• width number
  宽度，默认flex：1全屏

• height number
  高度，默认flex：1全屏

• style {...} style
  只加载当前索引

• loadMinimal bool
  默认false 只加载当前索引

• loadMinimalSize 1 umber
  查看当前索引

• loadMinimalLoader
  <ActivityIndicator/> element
  自定义预加载样式

(3)分页小圆点

• showsPagination bool
  默认true 在页面下边显示圆点，以表明当前页面位于第几个

• renderPagination
  func 通过三个参数（index,total,context）去渲染如何分页

• dot 自定义元素样式

    <View style={{backgroundColor: '#e6e6e6',width: 5,height: 
    5,borderRadius: 4,marginLeft: 3, marginRight: 3, marginTop: 
   3,marginBottom: 3}} />   
  

• activeDot 自定义当前选择点元素样式

   <View style={{backgroundColor: '#e6e6e6',width: 5,height: 
  5,borderRadius: 4,marginLeft: 3, marginRight: 3, marginTop: 
   3,marginBottom: 3}} />
  

• dotStyle - object 允许自定义当前选择点元素样式

(4)是否自定义

• autoplay bool
  默认true
  设置轮播图为自动播放模式
• autoplayTimeout number
  默认2.5 设置轮播间隔
• autoplayDirection bool
  默认ture 控制轮播图是否循环

四：完整代码

   import React, { Component } from 'react';
   import {
   Platform,
  StyleSheet,
  Text,
   View,
  Image,
  Dimensions,

} from 'react-native';

 //引用插件
 import Swiper from 'react-native-swiper';

// 取得屏幕的宽高Dimensions
const { width, height } = Dimensions.get('window');

 export default class MyPage extends Component {

  constructor(props) {
   super(props);
    this.state = {

    swiperShow: false,
  
 };
}

 // 轮播图
renderBanner() {
     if (this.state.swiperShow) {
      console.log ('返回值' + this.state.swiperShow);
     return (
     <Swiper
       style={styles.wrapper}
       height={width * 40 / 75}
       showsButtons={false}
       removeClippedSubviews={false} //这个很主要啊，解决白屏问题
       autoplay={true}
       horizontal ={true}
       paginationStyle={styles.paginationStyle}
       dotStyle={styles.dotStyle}
       activeDotStyle={styles.activeDotStyle}
  >
      <Image source={require('./image/swiper1.png')} style={styles.bannerImg} />
      <Image source={require('./image/swiper2.png')} style={styles.bannerImg} />
      <Image source={require('./image/swiper3.png')} style={styles.bannerImg} />
      <Image source={require('./image/swiper4.png')} style={styles.bannerImg} />
      

  </Swiper>

  );

} else {
   return (
      <View style={styles.wrapper}>
          <Image source={require('./image/swiper1.png')} style={styles.bannerImg} />
      </View>
    );
  }
}

componentDidMount() {
  setTimeout(() => {
  this.setState({
      swiperShow: true,
  });
 }, 1)
  }


render() {
return (
  <View style={styles.container}>
  {this.renderBanner()}
  </View>
      );
   }
 }

 const styles = StyleSheet.create({
  container: {
  height:width * 40 / 75,
    },

   wrpaper: {
   width: width,
   height:width * 40 / 75,

  },

    paginationStyle: {
       bottom: 6,
     },
      dotStyle: {
       width: 22,
      height: 3,
     backgroundColor: '#fff',
     opacity: 0.4,
      borderRadius: 0,
   },
     activeDotStyle: {
          width: 22,
         height: 3,
       backgroundColor: '#fff',
        borderRadius: 0,
     },

      });

效果图

五、遇到图片不显示的问题

第一种情况：
直接把<Swiper></Swiper>写入函数，导致不显示

解决办法：
第一步：

      constructor(props) {
       super(props);
       this.state = {

      swiperShow: false,
  
     };
    }

第二步：

   componentDidMount() {
  setTimeout(() => {
  this.setState({
      swiperShow: true,
  });
 }, 1)
  }

第三步：

renderBanner() {
     if (this.state.swiperShow) {
    
} else {

}

第二种情况：
如果在导入轮播图的页面使用FlatList或者ListView，这个时候只显示第一张，其他的不显示
解决办法：
加入即可

    removeClippedSubviews={false} //这个很主要啊，解决白屏问题