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,官网使用实例：
1 import React, { Component } from 'react';2 import {3 Text,4 View,5 Dimensions,6 } from 'react-native';7 import Carousel from 'react-native-looped-carousel';8 9 const { width, height } = Dimensions.get('window');
10
11 export default class CarouselExample extends Component {
12
13 constructor(props) {
14 super(props);
15
16 this.state = {
17 size: { width, height },
18 };
19 }
20
21 _onLayoutDidChange = (e) => {
22 const layout = e.nativeEvent.layout;
23 this.setState({ size: { width: layout.width, height: layout.height } });
24 }
25
26 render() {
27 return (
28 <View style={{ flex: 1 }} onLayout={this._onLayoutDidChange}>
29 <Carousel
30 delay={2000}
31 style={this.state.size}
32 autoplay
33 pageInfo
34 onAnimateNextPage={(p) => console.log(p)}
35 >
36 <View style={[{ backgroundColor: '#BADA55' }, this.state.size]}><Text>1</Text></View>
37 <View style={[{ backgroundColor: 'red' }, this.state.size]}><Text>2</Text></View>
38 <View style={[{ backgroundColor: 'blue' }, this.state.size]}><Text>3</Text></View>
39 </Carousel>
40 </View>
41 );
42 }
43 }
2,我的使用实例：
1 <Carousel2 delay={4000} //自动切换的延迟 （毫秒）3 style={{ height: Boxheight, width: AppSetting.ScreenWidth, backgroundColor: AppSetting.BLACK }} //样式4 autoplay //自动轮播5 pageInfo={false} //在底部显示当前页面下标 / 页面个数6 swiper //允许手势滑动7 bullets={true} //显示小圆点8 bulletStyle={{ //未选中的圆点样式9 backgroundColor: 'rgba(255,255,255,0.4)',
10 width: 12,
11 height: 12,
12 borderRadius: 50,
13 borderColor:'rgba(255,255,255,0.4)',
14 // marginLeft: 10,
15 // marginRight: 9,
16 // marginTop: 6,
17 // marginBottom: 9,
18 margin:6
19 }} //未选中时小圆点的样式
20 chosenBulletStyle={{ //选中的圆点样式
21 backgroundColor: AppSetting.MAIN_COLOR,
22 width: 16,
23 height: 16,
24 borderRadius: 50,
25 // marginLeft: 10,
26 // marginRight: 9,
27 // marginTop: 9,
28 // marginBottom: 9,
29 margin:6
30 }}//选中时小圆点的样式
31 >
32 {React.Children.map(self.state.dataImageSource, (child, index) => {
33 return (
34 <View>
35 <TouchableOpacity
36 // key={index}
37 style={styles.img}
38 activeOpacity={1}
39 //onPress={() => { Actions.AnnouncementDetails({ model: child }) }}
40 onPress={() => { this.openAnnouncementData(child) }}
41 >
42 <Image
43 source={{ uri: child }}
44 style={styles.img}
45 resizeMode='stretch' />
46 </TouchableOpacity>
47 </View>
48 )
49 })}
50
51 </Carousel>
1 self.setState({2 announcementData: [3 {4 id: 1,5 title: 'React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例)',6 imageurl: 'http://www.baidu.com/images/banner1.png',7 url: 'https://www.cnblogs.com/jackson-zhangjiang/p/9524842.html'8 },9 {
10 id: 3,
11 title: 'React Native之FlatList的介绍与使用实例',
12 imageurl: 'http://www.baidu.com/images/banner2.png',
13 url: 'https://www.cnblogs.com/jackson-zhangjiang/p/9523927.html'
14 },
15 {
16 id: 4,
17 title: '将数字转换成千分位表示',
18 imageurl: 'http://pic.58pic.com/58pic/10/97/02/30a58PICH7N.jpg',
19 url: 'https://www.cnblogs.com/jackson-zhangjiang/p/9454362.html'
20 },
21
22 ],
23 dataImageSource: [
24 'http://www.baidu.com/images/banner1.png',
25 'http://www.baidu.com/baidufiles/banner/images/2018/08/07/QQ%E5%9B%BE%E7%89%8720180807164315.jpg',
26 'http://www.baidu.com/images/banner2.png',
27 'http://pic.58pic.com/58pic/10/97/02/30a58PICH7N.jpg',
28 ],
29 isStartRendering:true
30 })
当数据加载完成后，再渲染界面：
1 {this.state.isStartRendering?this.SowingMap():null}React-Native之轮播组件汇总 以及looped-carousel的介绍与使用相关推荐
- React Native 项目常用第三方组件汇总
React Native 项目常用第三方组件汇总 https://www.jianshu.com/p/d9cd9a868764?utm_campaign=maleskine&utm_conte ...
- 基于移动端Reactive Native轮播组件的应用与开发详解
总结下这段时间学习reactive native的一些东西,我们来认识一下,被炒得这么火的rn,究竟是个什么东西,以及如何去搭建自己的demo. reactive native是什么 由facebo ...
- 响应式轮播_角度2的响应式轮播组件
响应式轮播 Update (March 22, 2016): Provided a Demo Link which is available on PlunkerUpdate (March 21, 2 ...
- 推荐一款带暂停功能的轮播组件，不要谢我，我叫红领巾！
阅读目录 一.效果展示 1.先跟大家见个面,打个招呼 2.什么?切换太慢了?好,加快速度! 3.加入其他功能 4.图片太小,看不出效果?好,那来个大图感受下! 5.如果你不想要右上角的小图标,照样可以 ...
- 【Flutter】Banner 轮播组件 ( flutter_swiper 插件 | Swiper 组件 )
文章目录 一.flutter_swiper 插件 二.Swiper 组件使用 三.完整代码示例 四.相关资源 一.flutter_swiper 插件 到 https://pub.dev/package ...
- Vue.js-Day06-PM【项目实战(附带 完整项目源码)-day01-pm：轮播组件（使用、安装依赖、具体操作过程）、favicon详细制作】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 实战项目源码[链接:https://pan.baidu.com/s/1r0Mje3Xnh8x4F1HyG4aQTA 提 ...
- Angular2组件与指令的小实践——实现一个图片轮播组件
如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图. 而除了直接看的见的躯体之外,一个完整的" ...
- ES6公用立体轮播组件的封装及使用
ES6公用立体轮播组件的封装及使用 源码github链接:https://github.com/XieTongXue/how-to/tree/master/carousel-3d 1.效果展示 2.容 ...
- bootstrap 轮播控制时间_【前端冷知识】如何封装一个图片轮播组件
组件封装是一个前端工程师进阶的必经之路.组件封装是指Web页面上抽出来一个个包含模版(HTML).功能(Javascript)和样式(CSS)的单元.所以,今天的内容,我们将带你了解组件封装的开发思路 ...
- android 图片轮播组件,Android客户端实现图片轮播控件
本文和大家一起写一个Android图片轮播控件,供大家参考,具体内容如下 1. 轮播控件的组成部分 我们以知乎日报Android客户端的轮播控件为例,分析一下轮播控件的主要组成: 首先我们要有用来显示 ...
最新文章
- dedecms织梦获得首字母或拼音的方法,并实现文章列表按首字母归类
- nodejs源码—初始化
- 太简单！日常小动作让你摆脱程序员职业病
- foreach 实现 MyBatis 遍历集合与批量操作数据
- java web基础编程题_云课堂javaweb微专业Java基础测试题3
- Bootstrap按钮支持的元素
- 如何使用HttpContext对象
- Spring boot+Thymeleaf+easyui集成：js创建组件页面报错
- 轮播图实现html,html、css、js实现轮播图
- 商业智能BI有哪些数据价值
- ubuntu vscode通过cmake配置c++和VS2019一样 进行调试
- iOS开发网络篇—GET请求和POST请求(转)
- Log4cpp 配置文件格式说明
- 加载项目的时候提示：需要缺少的web组件才能进行加载
- 网页title如何优化
- 计算机中的相对符号怎么按,丶符号怎么打-Mac里特殊符号的输入技巧
- css超出两行省略号没效果,Css 设置超过再两行显示省略号
- Jsd2205面试题
- 计算机编程课程顺序_您可以在2月开始免费在线编程和计算机科学课程
- RDS Mysql Single-AZ和Multi-AZ性能差异