转载:React-Native学习--轮播图第三方组件-react-native-swiper
一.通过npm安装React-native-swiper
$ npm install react-native-swiper --save
$ npm i react-timer-mixin --save
二.在项目中导入
import Swiper from 'react-native-swiper';
三.使用
return(
<View>
<Swiper height={200}
loop={true}
// showsButtons={true}
index={0}
autoplay={true}
horizontal={false}
>
{this.renderImg()}
轮播图的元素可以是任意空间 这里添加一组图片+文字(Text)会依次显示<span style="white-space:pre"> </span>
</Swiper>
</View>
);
}
renderImg(){
var imageViews=[];
for(var i=0;i<images.length;i++){
imageViews.push(
<Image
key={i}
style={{flex:1}}
source={{uri:images[i]}}
/>
);
}
imageViews.push(<Text>lalala</Text>);
return imageViews;
}
四.相关属性说明
1.Basic
Prop |
Default |
Type |
Description |
horizontal |
true |
bool |
如果值为true时,那么滚动的内容将是横向排列的,而不是垂直于列中的。 |
loop |
true |
bool |
如果设置为false,那么滑动到最后一张时,再次滑动将不会展示第一张图片。 |
index |
0 |
number |
初始进入的页面标识为0的页面。 |
showsButtons |
false |
bool |
如果设置为true,那么就可以使控制按钮(即:左右两侧的箭头)可见。 |
autoplay |
false |
bool |
设置为true,则页面可以自动跳转。 |
2.Custom basic style & content
Prop |
Default |
Type |
Description |
width |
- |
number |
如果你没有特殊的设置,就通过flex:1默认为全屏。 |
height |
- |
number |
如果你没有特殊的设置,就通过flex:1默认为全屏。 |
style |
{...} |
style |
设置页面的样式。 |
3.Pagination
Prop |
Default |
Type |
Description |
showsPagination |
true |
bool |
默认值为true,在页面下边显示圆点,以标明当前页面位于第几个。 |
paginationStyle |
{...} |
style |
设置页面原点的样式,自定义的样式会和默认样式进行合并。 |
renderPagination |
|
|
|
dot |
<View style={{backgroundColor:'rgba(0,0,0,.2)', width: 8, height: 8,borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} /> |
element |
可以自定义不是当前圆点的样式 |
activeDot |
<View style={{backgroundColor: '#007aff', width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} /> |
element |
可以自定义当前页面圆点的样式 |
4.Autoplay
Prop |
Default |
Type |
Description |
autoplay |
true |
bool |
设置为true可以使页面自动滑动。 |
autoplayTimeout |
2.5 |
number |
设置每个页面自动滑动停留的时间 |
autoplayDirection |
true |
bool |
圆点的方向允许默认自己控制 |
5.Control buttons
Prop |
Default |
Type |
Description |
showsButtons |
true |
bool |
是否显示控制箭头按钮 |
buttonWrapperStyle |
{position: 'absolute', paddingHorizontal: 15, paddingVertical: 30, top: 70, left: 0, alignItems:'flex-start'} |
style |
定义默认箭头按钮的样式 |
nextButton |
<Text style={{fontSize:60, color:'#00a7ec', paddingTop:30, paddingBottom:30}}>‹</Text> |
element |
自定义右箭头按钮样式 |
prevButton |
<Text style={{fontSize:60, color:'#00a7ec', paddingTop:30, paddingBottom:30}}>›</Text> |
element |
自定义左箭头按钮样式 |