【React Natvie】React-native-swiper的安裝和配置【ES6】

時間 2019-12-11

標籤 React Natvie react native swiper 安裝配置 ES6 欄目 React 简体版

原文原文鏈接

　　react-native-swiper輪播圖，是咱們開發中特別常見的效果，首先感謝編寫react-native-swiper的大神，讓咱們方便了不少。這個框架主要是用來作輪播圖,焦點圖等,內置了各類樣式的輪播圖. github地址: https://github.com/leecade/react-native-swiperreact

　　React Native官方文檔：https://reactnative.cn/docs/getting-started/git

　　react-native-swiper官方教程：https://github.com/leecade/react-native-swipergithub

　　項目地址GitHub地址：https://github.com/zhouwei1994/nativeCase.gitnpm

　一、react-native-swiper如何安裝？

yarn add react-native-swiper
//或者
npm install --save react-native-swiper

　二、react-native-swiper導入使用？

import Swiper from 'react-native-swiper';

　三、react-native-swiper如何使用？

<Swiper
                    style={styles.swiperStyle}
                    // 這個很重要，解決白屏問題
                    removeClippedSubviews={false}
                    // 切換時間，單位秒
                    autoplayTimeout={3}
                    // 是否自動輪播
                    autoplay={true}
                    // 若是爲true，滾動方向是橫向的，若是爲false,滾動方向是縱向的，
                    horizontal={true}
                    dot={<View style={[styles.dotStyle,styles.dotCommonStyle]}/>}
                    activeDot={<View style={[styles.activeDotStyle,styles.dotCommonStyle]} />}
                >
                    <Image source={{uri:'image1'}} style={styles.bannerStyle}/>
                    <Image source={{uri:'image2'}} style={styles.bannerStyle} />
                    <Image source={{uri:'image3'}} style={styles.bannerStyle} />
                    <Image source={{uri:'image4'}} style={styles.bannerStyle} />
                    <Image source={{uri:'image5'}} style={styles.bannerStyle} />
                </Swiper>

　　四、react-native-swiper是否能夠自定義活動標識的樣式？（默認是個「 . 」）

//經過設置如下兩個屬性，能夠實現Dot的樣式自定義。
dot={<View style={[styles.dotStyle,styles.dotCommonStyle]}/>}
activeDot={<View style={[styles.activeDotStyle,styles.dotCommonStyle]} />}


dotStyle:{
        width:8,
        backgroundColor:'white',
    },
    activeDotStyle:{
        width:16,
        backgroundColor: '#fdd000',
    },
    dotCommonStyle:{
        borderRadius: 8,
        marginLeft:5,
        height:8,
    },

　　五、案例代碼：

import React from 'react';
import {
    ScrollView,
    View,
    Text,
    Image,
    StyleSheet,
} from 'react-native';
let Dimensions = require('Dimensions');
let {width} = Dimensions.get('window').width;
//第三方組件
import Swiper from 'react-native-swiper';
//自定義組件
import NavigatonSearch from './NANavigationSearch';

const ruleItemW = (width - 60) / 2;

export default class NAHomeScreen extends React.Component {
    static  navigationOptions = {
        title:'首頁',
        headerLeft:(
            <Image source={{uri:'ic_scan'}} style={{width:22,height:22,marginLeft: 20}}/>
        ),
        headerRight:(
            <Image source={{uri:'ic_order'}} style={{width:22,height:22,marginRight: 20}}/>
        ),
        headerTitle:<NavigatonSearch />
    }
    render() {
        return (
            <ScrollView style={styles.containerStyle}>
                <Swiper
                    style={styles.swiperStyle}
                    // 這個很重要，解決白屏問題
                    removeClippedSubviews={false}
                    // 切換時間，單位秒
                    autoplayTimeout={3}
                    // 是否自動輪播
                    autoplay={true}
                    // 若是爲true，滾動方向是橫向的，若是爲false,滾動方向是縱向的，
                    horizontal={true}
                    dot={<View style={[styles.dotStyle,styles.dotCommonStyle]}/>}
                    activeDot={<View style={[styles.activeDotStyle,styles.dotCommonStyle]} />}
                >
                    <Image source={{uri:'image1'}} style={styles.bannerStyle}/>
                    <Image source={{uri:'image2'}} style={styles.bannerStyle} />
                    <Image source={{uri:'image3'}} style={styles.bannerStyle} />
                    <Image source={{uri:'image4'}} style={styles.bannerStyle} />
                    <Image source={{uri:'image5'}} style={styles.bannerStyle} />
                </Swiper>

                {/*汽車服務分類*/}
                <View style={styles.carServiceStyle}>
                    {this.renderAllService()}
                </View>

                {/*違章查詢和車貸計算*/}
                <View style={styles.rulesView}>
                    <Image source={{uri:"bt_violation"}} style={styles.rulesItemStyle}/>
                    <Image source={{uri:"pic_home_chedai"}} style={styles.rulesItemStyle}/>
                </View>

                {/*搶購廣告*/}
                <View>
                    <Image source={{uri:"banner_sale"}} style={styles.hotAdStyle}/>
                </View>
            </ScrollView>
        );
    }

    renderAllService(){
        var itemArr = [];
        let titleArr = ["汽車用品","洗車卡","汽車保養","汽車資訊"];
        let iconArr = ["ic_articles","ic_card","ic_maintain","ic_home_news"];
        for (var i = 0; i < titleArr.length ; i++) {
            itemArr.push(
                <View style={styles.serviceItemStyle}>
                    <Image source={{uri:iconArr[i]}} style={styles.serviceItemImage}/>
                    <Text style={styles.serviceItemText}>{titleArr[i]}</Text>
                </View>
            )

        }
        return itemArr;
    }
}

const styles = StyleSheet.create({
    containerStyle:{
        padding: 20,
    },
    swiperStyle:{
        height:200,
    },
    bannerStyle:{
        height:200,
        borderRadius: 10,
    },

    dotStyle:{
        width:8,
        backgroundColor:'white',
    },
    activeDotStyle:{
        width:16,
        backgroundColor: '#fdd000',
    },
    dotCommonStyle:{
        borderRadius: 8,
        marginLeft:5,
        height:8,
    },
    carServiceStyle:{
        flexDirection: 'row',
        justifyContent: 'space-around',
        marginTop: 20,
    },
    serviceItemStyle:{
        alignItems: 'center'
    },
    serviceItemImage:{
        width:45,
        height:45,
    },
    serviceItemText:{
        marginTop: 11,
        fontSize:12,
        color:'rgba(51,51,51,1.0)',
    },
    rulesView:{
        flexDirection: 'row',
        justifyContent:'space-between',
        marginTop:20,
    },
    rulesItemStyle:{
        width:ruleItemW,
        height:65,
        borderRadius:5,
    },
    hotAdStyle:{
        flex:1,
        marginTop:18,
        height:69,
    }

})