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的介绍与使用

二,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}
上一篇:redis 学习笔记(1)-编译、启动、停止


下一篇:android TCP 客户端(仅接收数据)