React NatvieReact-native-swiper的安装和配置ES6

Posted 2021-12-13 xjf125

　　react-native-swiper轮播图，是我们开发中特别常见的效果，首先感谢编写react-native-swiper的大神，让我们方便了很多。这个框架主要是用来做轮播图,焦点图等,内置了各种样式的轮播图. github地址: https://github.com/leecade/react-native-swiper

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

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

　　项目地址GitHub地址：https://github.com/zhouwei1994/nativeCase.git

　1、react-native-swiper如何安装？

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

　2、react-native-swiper导入使用？

import Swiper from ‘react-native-swiper‘;

　3、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>

　　4、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,
    },

　　5、案例代码：

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,
    }

})

　　6、效果图展示：