ReactNative: 使用第三方庫輪播組件react-native-image-swiper

一、簡介

在市面主流的app中，輪播功能是一個非常常見的模塊功能，通常作為banner展示所用。實現輪播組件的技術無非兩種，一種是使用原生組件進行自定義，另一種就是使用第三方輪子了。有些時候，因為項目緊張，沒有時間去自定義，那么就習慣使用性能完善的開源組件了。在RN項目中，github上也提供了很多優秀的開源輪播組件，其中比較牛逼的一個就是react-native-swiper。關於它的詳細說明，可以去github上查看。

 

二、安裝

1、npm install  xxx

npm i react-native-swiper --save

2、react-native link xxx

react-native link react-native-swiper

 

三、屬性

//------------------------------- 1、基礎屬性 -----------------------------/

//如果為true，則滾動視圖的子級水平排列成行，而不是垂直排列成列。
horizontal?: boolean
       
//設置為false可禁用連續循環模式。
loop?: boolean
        
//初始幻燈片的索引號。
index?: number
        
//設置為true可使左右切換按鈕可見。
showsButtons?: boolean
       
//設置為true啟用自動播放模式。 
autoplay?: boolean
       
//用戶滑動時觸發調用
onIndexChanged?: any


//-------------------------------2、自定義基本樣式和內容 -----------------------/
            
//輪播組件的寬度，如果沒有指定默認值，則通過flex啟用全屏模式：1。
width?: number
        
//輪播組件的高度，如果沒有指定默認值，則通過flex啟用全屏模式：1。
height?: number
        
//視圖樣式 
style?: ViewStyle
        
//是否進行預加載
loadMinimal?: boolean
       
//是否預加載最小的個數
loadMinimalSize?: boolean
        
//是否顯示自定義預加載的樣式
loadMinimalLoader?: boolean


//-----------------------------------3、分頁---------------------------------/     
   
//設置為true使分頁可見。
showsPagination?: boolean
        
//自定義分頁樣式
paginationStyle?: ViewStyle
       
//使用this.state.index / this.state.total / this的三個參數（索引，總計，上下文）控制呈現分頁，例如：顯示數字而不是點。
renderPagination?: (index: number, total: number, swiper: Swiper) => JSX.Element
        
//自定義點元素。
dot?: any
        
//自定義當前點元素
activeDot?: any
        
//自定義點元素樣式。
dotStyle?: ViewStyle

//自定義當前點元素樣式。
activeDotStyle?: ViewStyle
        
//自定義點元素顏色
dotColor?: string
        
//自定義當前點元素顏色
activeDotColor?: string
        

//-----------------------------------4、自動播放---------------------------------/    
    
//自動播放過渡之間的延遲時間（秒）。
autoplayTimeout?: number
       
//循環方向控制。
autoplayDirection?: boolean


//--------------------------------5、控制器按鈕------------------------------------/
        
//設置為true可使控制按鈕可見。
buttonWrapperStyle?: any
        
//自定義下一個按鈕。
nextButton?: JSX.Element
        
//自定義上一個按鈕。
prevButton?: JSX.Element


//--------------------------------6、滾動響應------------------------------------/

//開始拖拽時觸發該函數
onScrollBeginDrag?: any
        
//在滾動結束回彈的時候觸發該函數
onMomentumScrollEnd?: any
        
//在滾動結束回彈后觸摸時觸發該函數
onTouchStartCapture?: any
        
//觸摸開始時觸發該函數
onTouchStart?: any
        
//觸摸結束時觸發該函數
onTouchEnd?: any
        
//長時間掛起時觸發該調用
onResponderRelease?: any

//--------------------------------7、滾動屬性------------------------------------/
//是否支持分頁 
pagingEnabled?: boolean
        
//設置true顯示水平指示器
showsHorizontalScrollIndicator?: boolean
        
//設置true顯示豎直指示器
showsVerticalScrollIndicator?: boolean
       
//設置true允許彈性
bounces?: boolean
        
//是否允許滾動到頂部
scrollsToTop?: boolean
        
//是否刪除裁剪的子視圖
removeClippedSubviews?: boolean
        
//是否自動調節內容偏移
automaticallyAdjustContentInsets?: boolean
        
//是否支持滾動
scrollEnabled?: boolean

 

四、示例

為確保組件正常使用，可以拷貝Github上的組件源碼進行驗證，示例如下：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';

import Swiper from 'react-native-swiper';

export default class RNApplyComponent extends Component {
    render() {
        return (
            <Swiper style={styles.wrapper} showsButtons={true}>
                <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>
        );
    }
}

const 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('RNApplyComponent', () => RNApplyComponent);

 

五、使用

參考官方的案例后，我們就可以根據自己的需求改造UI樣式了。我們就按照顯示banner的標准來實現一個圖片輪播的效果。注意：在這里遇到有一個issue無法解決，就是設置Swiper的height不起作用，暫時沒有辦法，我就再嵌套了一個父視圖解決。如下所示：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    View,
    Image
} from 'react-native';

import Swiper from 'react-native-swiper';

let img1url = "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3566251348,1114182777&fm=26&gp=0.jpg";
let img2url = "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1365127024,980414404&fm=26&gp=0.jpg";
let img3url = "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1874734052,880491637&fm=26&gp=0.jpg";

export default class RNApplyComponent extends Component {
    render() {
        return (
            <View style={[styles.container,styles.center]}>
                <View style={[styles.swiper_parent,styles.center]}>
                    <Swiper showsButtons={false}
                            autoplay={true}
                            autoplayTimeout={1}
                            dot={
                                <View
                                    style={{
                                        backgroundColor: 'white',
                                        width: 8,
                                        height: 8,
                                        borderRadius: 4,
                                        marginLeft: 3,
                                        marginRight: 3,
                                        marginTop: 3,
                                        marginBottom: 3
                                    }}
                                />
                            }
                            activeDot={
                                <View
                                    style={{
                                        backgroundColor: 'red',
                                        width: 16,
                                        height: 8,
                                        borderRadius: 4,
                                        marginLeft: 3,
                                        marginRight: 3,
                                        marginTop: 3,
                                        marginBottom: 3
                                    }}
                                />
                            }
                    >
                        <View style={[styles.slide,styles.center]}>
                            <Image style={styles.image} resizeMode="stretch" source={{uri:img1url}}/>
                        </View>
                        <View style={[styles.slide,styles.center]}>
                            <Image style={styles.image} resizeMode="stretch" source={{uri:img2url}}/>
                        </View>
                        <View style={[styles.slide,styles.center]}>
                            <Image style={styles.image} resizeMode="stretch" source={{uri:img3url}}/>
                        </View>
                    </Swiper>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container:{
        flex: 1,
        backgroundColor: '#FFFFFF'
    },
    swiper_parent: {
        width: 340,
        height:200
    },
    slide: {
        flex: 1,
        backgroundColor: 'blue',
    },
    center: {
        justifyContent: 'center',
        alignItems: 'center'
    },
    image: {
        flex: 1,
        width: 340
    }
});

AppRegistry.registerComponent('RNApplyComponent', () => RNApplyComponent);