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