ReactNative學習－滑動查看圖片第三方組件react-native-swiper

標籤：

滑動查看圖片第三方組件：react-native-swiper，現在的版本為：1.4.3，該版本還不支援Android。

下面介紹的是該組件的一些用法，可能總結的不完整，希望大家一起來共同完善。

官方文檔：https://github.com/leecade/react-native-swiper

：

安裝

npm install --save react-native-swiper

基礎用法

import React, {AppRegistry,Component,StyleSheet,Text,View} from ‘react-native‘;import Swiper from ‘react-native-swiper‘; class swiper extends Component { render() { return ( <Swiper style={styles.wrapper}  showsButtons={true}  index={1}  loop={false} > <View style={styles.slide1}> <Text style={styles.text}>Hello Swiper</Text> </View> <View style={styles.slide2}> <Text style={styles.text}>Beautiful</Text> </View> <View style={styles.slide3}> <Text style={styles.text}>And simple</Text> </View> </Swiper> ) ｝｝ var styles = StyleSheet.create({ wrapper: { }, slide1: { flex: 1, justifyContent: ‘center‘, alignItems: ‘center‘, backgroundColor: ‘#9DD6EB‘, }, slide2: { flex: 1, justifyContent: ‘center‘, alignItems: ‘center‘, backgroundColor: ‘#97CAE5‘, }, slide3: { flex: 1, justifyContent: ‘center‘, alignItems: ‘center‘, backgroundColor: ‘#92BBD9‘, }, text: { color: ‘#fff‘, fontSize: 30, fontWeight: ‘bold‘, }}) AppRegistry.registerComponent(‘swiper‘, () => swiper)

這個組件可以應用於各種輪播圖，組件內建的設定還是很全面的（除了現在的版本還不相容Android）,用法也不複雜。

• 組件中使用index屬性來標識顯示當前的頁面，當頁面滑動的時候這個index肯定是會變化的，我們想在頁面滑動後，還能得到它的index值，可以使用onMomentumScrollEnd={(e, state, context)=>{this.currentIndex=state.index}}，函數中得到的currentIndex便是當前頁面的index。
• 測試的這個版本，如果loop設定為true，showsButtons設定也為true，會出現滑動有時不正常的情況，所以我將loop設定為false來解決這個問題了。

屬性

這裡只是列舉了一部分經常使用的屬性設定，有許多回呼函數的使用方法，我也不是特別熟悉，所以還是不誤導大家了,.大家可以上官網上詳細的瞭解。

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	自訂左箭頭按鈕樣式

ReactNative學習－滑動查看圖片第三方組件react-native-swiper