轉(zhuǎn)載：React-Native學(xué)習(xí)--輪播圖第三方組件-react-native-swiper
一.通過npm安裝React-native-swiper
$ npm install react-native-swiper --save
$ npm i react-timer-mixin --save
二.在項目中導(dǎo)入
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;
}
四.相關(guān)屬性說明
1.Basic
| Prop |
Default |
Type |
Description |
| horizontal |
true |
bool |
如果值為true時疙咸，那么滾動的內(nèi)容將是橫向排列的简卧，而不是垂直于列中的。 |
| loop |
true |
bool |
如果設(shè)置為false匹颤，那么滑動到最后一張時，再次滑動將不會展示第一張圖片廉赔。 |
| index |
0 |
number |
初始進(jìn)入的頁面標(biāo)識為0的頁面肉微。 |
| showsButtons |
false |
bool |
如果設(shè)置為true，那么就可以使控制按鈕（即：左右兩側(cè)的箭頭）可見蜡塌。 |
| autoplay |
false |
bool |
設(shè)置為true碉纳，則頁面可以自動跳轉(zhuǎn)劳曹。 |
2.Custom basic style & content
| Prop |
Default |
Type |
Description |
| width |
- |
number |
如果你沒有特殊的設(shè)置，就通過flex:1默認(rèn)為全屏攒至。 |
| height |
- |
number |
如果你沒有特殊的設(shè)置库菲，就通過flex:1默認(rèn)為全屏。 |
| style |
{...} |
style |
設(shè)置頁面的樣式志膀。 |
3.Pagination
| Prop |
Default |
Type |
Description |
| showsPagination |
true |
bool |
默認(rèn)值為true熙宇，在頁面下邊顯示圓點，以標(biāo)明當(dāng)前頁面位于第幾個溉浙。 |
| paginationStyle |
{...} |
style |
設(shè)置頁面原點的樣式烫止，自定義的樣式會和默認(rèn)樣式進(jìn)行合并。 |
| 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 |
可以自定義不是當(dāng)前圓點的樣式 |
| activeDot |
<View style={{backgroundColor: '#007aff', width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} /> |
element |
可以自定義當(dāng)前頁面圓點的樣式 |
4.Autoplay
| Prop |
Default |
Type |
Description |
| autoplay |
true |
bool |
設(shè)置為true可以使頁面自動滑動戳稽。 |
| autoplayTimeout |
2.5 |
number |
設(shè)置每個頁面自動滑動停留的時間 |
| autoplayDirection |
true |
bool |
圓點的方向允許默認(rèn)自己控制 |
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 |
定義默認(rèn)箭頭按鈕的樣式 |
| 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 |
自定義左箭頭按鈕樣式 |
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
