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 <Carousel 2 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}
转载于:https://www.cnblogs.com/jackson-yqj/p/9541129.html
React-Native之轮播组件looped-carousel的介绍与使用相关推荐
- 基于移动端Reactive Native轮播组件的应用与开发详解
总结下这段时间学习reactive native的一些东西,我们来认识一下,被炒得这么火的rn,究竟是个什么东西,以及如何去搭建自己的demo. reactive native是什么 由facebo ...
- 《layui宇宙版教程》:轮播组件carousel
<Layui宇宙版教程>提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入: 1.30 轮播组件carousel carousel主要适用于跑 ...
- 响应式轮播_角度2的响应式轮播组件
响应式轮播 Update (March 22, 2016): Provided a Demo Link which is available on PlunkerUpdate (March 21, 2 ...
- Omi-touch实战 移动端图片轮播组件的封装
pc端的轮播,移动端的轮播都很常见.一年前,我还为手机端没有左滑,右滑事件从而封装了一个swipe库,可以自定义超过多少滑动时间就不触发,也可以设置滑动多少距离才触发,这一个功能的代码就达到400多行 ...
- 推荐一款带暂停功能的轮播组件,不要谢我,我叫红领巾!
阅读目录 一.效果展示 1.先跟大家见个面,打个招呼 2.什么?切换太慢了?好,加快速度! 3.加入其他功能 4.图片太小,看不出效果?好,那来个大图感受下! 5.如果你不想要右上角的小图标,照样可以 ...
- 【Flutter】Banner 轮播组件 ( flutter_swiper 插件 | Swiper 组件 )
文章目录 一.flutter_swiper 插件 二.Swiper 组件使用 三.完整代码示例 四.相关资源 一.flutter_swiper 插件 到 https://pub.dev/package ...
- React Native 项目常用第三方组件汇总
React Native 项目常用第三方组件汇总 https://www.jianshu.com/p/d9cd9a868764?utm_campaign=maleskine&utm_conte ...
- 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.容 ...
最新文章
- 人生和算法结合起来,你会不会比现在混得好?看完我明白了!
- 《父亲》家书选:小气的母亲
- android开发之-软件设置保存-快速学会使用SharedPreferences篇-实测
- buu [BJDCTF 2nd]老文盲了
- 手撕FSG2.0壳(有坑点)
- 无符号数的减法_C++核心准则ES.107:不要使用无符号数下标,使用gsl::index更好
- 还是贪心(结构体排序)
- [HTML] Google IE-x.js 解决IEx与W3C标准的冲突
- 【数据结构】——排序二叉树
- c++ 打印条码_条码打印软件之优化导入PDF文档的清晰度
- python grep awk_文本处理三剑客:grep、sed和awk命令介绍
- Matlab:实现Fra圆孔衍射仿真
- win7 修复计算机 黑屏,Win7系统崩溃不用重做!Win7无法进入桌面黑屏
- linux查看内存使用情况top详解
- 思岚SLAMTEC A1开箱测试(实现雷达数据的查看+hector_slam建图)
- 差分信号,差分对和耦合(一)——基本概念介绍
- 2023江西财经大学计算机考研信息汇总
- 2021年中国水果罐头行业进出口贸易及发展前景分析[图]
- python中查找文件当前位置的命令为tell()_Python文件处理之seek(), tell()用法...
- 从冬奥看中国科技(四):“一鱼多吃”的5G