React-Native學習--輪播圖第三方元件-react-native-swiper
阿新 • • 發佈：2018-11-20
一.通過npm安裝react-native-swiper
$ npm install react-native-swiper --save
$ npm i react-timer-mixin --save
import Swiper from 'react-native-swiper';
render(){ 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 |
自定義左箭頭按鈕樣式 |