React Natvie] [React-native-swiper Installation and Configuration] [ES6

　　react-native-swiper carousel view is particularly common in the development of our results, first of all thank the preparation react-native-swiper great God, let us a lot of convenience. This framework is mainly used for carousel view diagrams focus, built-in variety of styles of carousel Figure github address: https://github.com/leecade/react-native-swiper

　　React Native official document: https: //reactnative.cn/docs/getting-started/

　　react-native-swiper official tutorial: https: //github.com/leecade/react-native-swiper

　　Project Address GitHub address: https: //github.com/zhouwei1994/nativeCase.git

　1, react-native-swiper how to install?

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

　2, react-native-swiper into the use?

import Swiper from 'react-native-swiper';

　3, react-native-swiper how to use?

< Swiper 
                    style = {styles.swiperStyle}
                     // this is very important to solve the problem of white screen 
                    removeClippedSubviews = { to false }
                     // switching time, in seconds 
                    autoplayTimeout = { . 3 }
                     // whether to automatically rotate 
                    AutoPlay = { to true }
                     // if true, the scroll direction is horizontal, if false, the scroll direction is vertical, 
                    Horizontal = { to 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 whether you can customize the style of the activities identified? (The default is ".")

// by setting the following two properties can be achieved Dot style custom. 
= {DOT <View style = {[styles.dotStyle, styles.dotCommonStyle]} /> } 
activeDot = {<View style = {[styles.activeDotStyle, styles.dotCommonStyle]} /> } 


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

　　5, Case Code:

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 = {this is very important because it solves the problem of black and white//to false }
                     // switching time, in seconds 
                    autoplayTimeout. 3 = { }
                     // whether to automatically rotate 
                    AutoPlay = { to true }
                     // If true, the scroll direction is horizontal, if false, the scroll direction is vertical, 
                    Horizontal = { to 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>}
                * /Illegal auto loans and inquiries calculation/ *
                {

                    <Image Source URI = {{: "bt_violation" style = {}}} styles.rulesItemStyle /> 
                    <Image Source URI = {{: "pic_home_chedai" style = {}}} styles.rulesItemStyle /> 
                </ View> 
                { / * buying advertising * / }
                 <View> 
                    <Image Source URI = {{: "banner_sale" style = {}}} styles.hotAdStyle /> 
                </ View> 
            </ the ScrollView>         ); 
    } 
    renderAllService () { var itemArr = [ ]; 
        the let titleArr = [ "auto supplies", "car wash card", "car maintenance", "automotive News" ];
        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, renderings show: