RN开发实践——仿携程App(二)
来源:互联网 发布:caddy windows 编辑:程序博客网 时间:2024/05/17 05:17
文章最后附上源码地址
上一片博客链接RN开发实践——仿携程App(一)
实现首页的轮播图
Swiper简介
The best Swiper component for React Native。Swiper是目前应用较广泛的移动端网页触摸内容滑动js插件。
Swiper : GitHub地址
1.基本属性:
2.页码属性
3.自动播放的属性
bool
设置为true可以使页面自动滑动。 autoplayTimeout 2.5 number
设置每个页面自动滑动停留的时间 autoplayDirection true bool
圆点的方向允许默认自己控制引入Swiper第三方库
进入项目的根目录执行下面的指令:
npm i react-native-swiper --save // 建议安装1.5.5版本比较稳定: npm i react-native-swiper@1.5.5 --save
如果报错请执行多次
使用Swiper库,自定义Banner轮播图组件
新建一个Banner组件
封装自己的一个轮播组件Banner,将在这个控件使用Swiper。
使用Banner组件
在HomePage中使用刚才创建的Banner组件,预先占个位置,效果后面一步一步实现。
执行效果:
给Banner传递数据
- 准备数据
这里呢,在App文件夹里创建一个data文件夹,用来存放一些模拟数据,建立了一个homebean的Json数据文件。用于首页数据加载。
- 导入数据
在HomePage组件中引入homebean这个json数据文件
//导入数据var homebean=require('../../date/homebean.json');
- 把数据传递给Banner组件
获取到homebean数据中的banners集合(轮播图数据),并通过在Banner组件中定义好的属性 banners 传递给Banner组件。
{/*广告轮播图*/}<Banner banners={homebean.banners}></Banner>
- Banner组件接收数据
回到Banner组件中,获取属性值(this.props.banners)接收传递过来的轮播图数据。
//接收数据var banners=this.props.banners;
引入Swiper第三方库
Banner组件获取完数据,引入Swiper,开始使用Swiper来实现轮播图
简单的布局
在Swiper简单的创建两个View组件(每个组件对应一个轮播图),预览看下效果,Swiper默认会生成指示器。
添加每个轮播广告图
遍历传递过来的banners轮播图数据,
添加每个轮播广告图。
获取屏幕的宽度,根据效果图每个轮播广告图的宽为手机的宽度
//获取手机屏幕的宽var {width} =Dimensions.get('window');
修改轮播图指示器的颜色
通过对Swiper组件属性的了解,改变dot 和 activedot,来修改轮播图指示器选中和为选中的样式,这里dot和activedot,需要传递一个View组件,并给View设置对应的样式style即可。
修改轮播图指示器的位置
通过设置Swiper属性paginationStyle 来修改轮播图的指示器位置,底层是通过绝对定位实现。
循环滚动和自动滚动
通过设置Swiper属性loop和autoplay开启轮播图循环和自动滚动。
最终轮播图实现效果如下:
最后附上项目地址
- RN开发实践——仿携程App(二)
- RN开发实践——仿携程App(一)
- RN开发实践——仿携程App(三)
- RN开发实践——仿携程App(四)
- Ubuntu字典app开发(二)——探索与实践
- RN布局(二)——伸缩容器的属性
- rn 启动项目失败:A problem occurred configuring project ':app'. (二)
- 图文CVS入门(二)——项目开发实践
- 开发操作系统实践(二)——LinDos文件系统
- HBuilder开发APP(二)——网络请求
- ReactNative开发——RN与android Native交互初探
- RN(React Native)开发Android App的新技术?
- App后台开发运维和架构实践学习总结(1)——App后台核心技术之用户验证方案
- App后台开发运维和架构实践学习总结(4)——APP的注册和登录功能设计
- App后台开发运维和架构实践学习总结(6)——App客户端与后台交互方式总结
- Android开发实践(二)
- App压力测试——(实践)
- App后台开发运维和架构实践学习总结(7)——RESTful API 设计规范
- 请好好规划你的人生和未来
- python中json.dumps()/loads()/dump()/load()使用
- R随机数
- PAT --- 1004. 成绩排名 (20)
- hbase中分页过滤器详细解析
- RN开发实践——仿携程App(二)
- 7分钟 unity oculus VR游戏开发
- 07.27.17
- 使用Jquery+bootstrap无限级菜单树
- window10 GPU版tensorflow安装(二)
- 定时器的输出比较模式产生的PWM波的频率计算
- 题目244-16进制的简单运算
- 【Java学习笔记】29:再谈多态性
- Linux内核源码-sys_connect()