【React Natvie】React-native-swiper的安装和配置【ES6】
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、效果图展示：
