React-Native react-native-swipe

作者: 天方夜歌 | 来源:发表于2018-04-23 19:20 被阅读136次

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} //这个很主要啊,解决白屏问题

相关文章

网友评论

    本文标题:React-Native react-native-swipe

    本文链接:https://www.haomeiwen.com/subject/arnllftx.html