React native 第三方組件 React native swiper

簡介:

這個框架主要是用來作輪播圖,焦點圖等,內置了各類樣式的輪播圖. github地址: https://github.com/leecade/react-native-swiper

如何使用

安裝,切換到本身項目的根目錄下,執行如下命令:

npm i react-native-swiper --save
複製代碼

導入:

import Swiper from 'react-native-swiper';
複製代碼

經常使用屬性介紹:

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}}>‹	element	自定義右箭頭按鈕樣式。
prevButton	<Text style={{fontSize:60, color:'#00a7ec', paddingTop:30, paddingBottom:30}}>›	element	自定義左箭頭按鈕樣式。

代碼示例

render(){  
  return(  
      <View>  
        <Swiper height={200} // 指定高度 
                loop={true} // 是否開啓循環
                showsButtons={true} // 設置控制按鈕(左右兩側的箭頭)是否可見 
                index={0}   
                autoplay={true} // 是否自動跳轉
                horizontal={false} // 是否水平滾動 
                > 
                //  在這裏進行添加組件操做(好比放入圖片和文字)
         </Swiper>  
      </View>  
  
  );  
}  

複製代碼