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