React-Native之轮播组件looped-carousel的介绍与使用

React-Native之轮播组件looped-carousel的介绍与使用

一,关于react-native轮播组件的介绍与对比

1,react-native-swiper在动态使用网页图片，多张图片时iOS上总是只显示第一张，Android正常显示，支持加载json数组数据。

2,react-native-viewpager，因为轮播时，下面的圆点有时显示会有误，加载上百页数据并且表现性能良好。在Android平台上面除此特性以外,ViewPager还支持自动循环无限轮播功能,类似与listview,需构建DataSource对象。

3,新的组件  react-native-looped-carousel ,整体看起来还不错（支持iOS Android），但是不支持加载json数组数据，只支持限制数组数据，而且在动态从数据库获取的数据时，如果数据还没获取完就渲染react-native-looped-carousel组件会报错:

二,react-native-looped-carousel的介绍

1,安装:

npm install react-native-looped-carousel --save

2,属性

Name	propType	default value	description
autoplay	boolean	true	是否自动轮播
delay	number	4000	多少毫秒切换一次
currentPage	number	0	设置初始页
pageStyle	style	null	页面的样式
contentContainerStyle	style	null	contentContainerStyle for the scrollView
onAnimateNextPage	func	null	切换轮播图时的回调方法
swipe	bool	true	是否允许手势滑动也换页面
分页	---	---	---
pageInfo	boolean	false	是否在底部显示当前页面下标 / 页面个数
pageInfoBackgroundColor	string	'rgba(0, 0, 0, 0.25)'	分页的背景色
pageInfoBottomContainerStyle	style	null	pageInfo容器的样式
pageInfoTextStyle	style	null	pageInfo中的文本样式
pageInfoTextSeparator	string	' / '	在 当前页面下标 和 页面个数之间的分隔符
小圆点	---	---	---
bullets	bool	false	是否在轮播的底部显示小圆点
bulletStyle	style	null	bullet（小圆点）的样式
bulletsContainerStyle	style	null	style for the bullets container
chosenBulletStyle	stlye	null	bullet的容器的样式
导航箭头	---	---	---
arrows	bool	false	是否显示轮播的导航箭头
arrowsStyle	style	null	导航箭头的样式
arrowsContainerStyle	style	null	导航箭头的容器样式
leftArrowText	string / element	'Left'	左箭头的文字或图片
rightArrowText	string / element	'Right'	label / icon for right navigation arrow

三,react-native-looped-carousel的使用实例

1,官网使用实例：

 import React, { Component } from 'react';
 import {
   Text,
   View,
   Dimensions,
 } from 'react-native';
 import Carousel from 'react-native-looped-carousel';

 const { width, height } = Dimensions.get('window');

 export default class CarouselExample extends Component {

   constructor(props) {
     super(props);

     this.state = {
       size: { width, height },
     };
   }

   _onLayoutDidChange = (e) => {
     const layout = e.nativeEvent.layout;
     this.setState({ size: { width: layout.width, height: layout.height } });
   }

   render() {
     return (
       <View style={{ flex: 1 }} onLayout={this._onLayoutDidChange}>
         <Carousel
           delay={2000}
           style={this.state.size}
           autoplay
           pageInfo
           onAnimateNextPage={(p) => console.log(p)}
         >
           <View style={[{ backgroundColor: '#BADA55' }, this.state.size]}><Text>1</Text></View>
           <View style={[{ backgroundColor: 'red' }, this.state.size]}><Text>2</Text></View>
           <View style={[{ backgroundColor: 'blue' }, this.state.size]}><Text>3</Text></View>
         </Carousel>
       </View>
     );
   }
 }

2,我的使用实例：

  <Carousel
                 delay={4000}   //自动切换的延迟 （毫秒）
                 style={{ height: Boxheight, width: AppSetting.ScreenWidth, backgroundColor: AppSetting.BLACK }}          //样式
                 autoplay    //自动轮播
                 pageInfo={false}    //在底部显示当前页面下标 / 页面个数
                 swiper      //允许手势滑动
                 bullets={true}  //显示小圆点
                 bulletStyle={{           //未选中的圆点样式
                     backgroundColor: 'rgba(255,255,255,0.4)',
                     width: 12,
                     height: 12,
                     borderRadius: 50,
                     borderColor:'rgba(255,255,255,0.4)',
                     // marginLeft: 10,
                     // marginRight: 9,
                     // marginTop: 6,
                     // marginBottom: 9,
                     margin:6
                 }} //未选中时小圆点的样式
                 chosenBulletStyle={{    //选中的圆点样式
                     backgroundColor: AppSetting.MAIN_COLOR,
                     width: 16,
                     height: 16,
                     borderRadius: 50,
                     // marginLeft: 10,
                     // marginRight: 9,
                     // marginTop: 9,
                     // marginBottom: 9,
                     margin:6
                 }}//选中时小圆点的样式
             >
                 {React.Children.map(self.state.dataImageSource, (child, index) => {
                     return (
                         <View>
                             <TouchableOpacity
                                 // key={index}
                                 style={styles.img}
                                 activeOpacity={1}
                                 //onPress={() => { Actions.AnnouncementDetails({ model: child }) }}
                                  onPress={() => { this.openAnnouncementData(child) }}
                             >
                                 <Image
                                     source={{ uri: child }}
                                     style={styles.img}
                                     resizeMode='stretch' />
                             </TouchableOpacity>
                         </View>
                     )
                 })}

             </Carousel>

 self.setState({
             announcementData: [
                 {
                     id: 1,
                     title: 'React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例)',
                     imageurl: 'http://www.baidu.com/images/banner1.png',
                     url: 'https://www.cnblogs.com/jackson-zhangjiang/p/9524842.html'
                 },
                 {
                     id: 3,
                     title: 'React Native之FlatList的介绍与使用实例',
                     imageurl: 'http://www.baidu.com/images/banner2.png',
                     url: 'https://www.cnblogs.com/jackson-zhangjiang/p/9523927.html'
                 },
                 {
                     id: 4,
                     title: '将数字转换成千分位表示',
                     imageurl: 'http://pic.58pic.com/58pic/10/97/02/30a58PICH7N.jpg',
                     url: 'https://www.cnblogs.com/jackson-zhangjiang/p/9454362.html'
                 },

             ],
  dataImageSource: [
                 'http://www.baidu.com/images/banner1.png',
                 'http://www.baidu.com/baidufiles/banner/images/2018/08/07/QQ%E5%9B%BE%E7%89%8720180807164315.jpg',
                 'http://www.baidu.com/images/banner2.png',
                 'http://pic.58pic.com/58pic/10/97/02/30a58PICH7N.jpg',
             ],
             isStartRendering:true
    })

当数据加载完成后，再渲染界面：

  {this.state.isStartRendering?this.SowingMap():null}