React Native布局实践:开发京东client首页(三)——轮播图的实现
上篇文章中,我们一起构建了京东client的TabBar。在本文中。将继续向大家介绍京东client首页轮播图及其下发功能button的开发方法,如今就让我们開始吧!
1.相关控件调研
眼下在Github开源的轮播图控件,个人觉得做得比較好的,一个是react-native-swiper(https://github.com/leecade/react-native-swiper),一个是react-native-viewpager(https://github.com/race604/react-native-viewpager),而经过试用发现。react-native-swiper尽管效果和样式较多、控制方便,但在将它缩小为一个固定高度的视图时,其底部的指示符号(即几个点,例如以下图)就不见了,所以终于我推荐使用react-native-viewpager。简单好用。
aaarticlea/png;base64,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" alt="" />
2.加入相关文件
下来我们将素材和相关的库导入项目当中,当中,react-native-viewpager的加入方法例如以下:
npm i -d react-native-viewpager --save
然后在project的images目录中创建banner目录,当中放入4个jpg文件:
接着,我们在HomePage类的定义前。创建一个数组常量,用于存放图片:
const BANNER_IMGS = [
require('../images/banner/1.jpg'),
require('../images/banner/2.jpg'),
require('../images/banner/3.jpg'),
require('../images/banner/4.jpg')
];
经过这么几个简单的步骤。我们对图片的引入也就完毕了。下来须要构建轮播图控件的布局。
3.构建ViewPager
经过分析,我们能够看到。首页轮播图的样式十分简单,仅仅须要指定高度,而水平方向,利用flex:1进行拉伸
但因为react-native-viewpager作者在构建这个控件的时候,应该是用到一些变量进行控制,并提供了一种方法。用于创建图片数据源,所以,假设须要使用react-native-viewpager必须在构造函数中进行初始化,详细代码例如以下:
constructor(props) {
super(props);
// 用于构建DataSource对象
var dataSource = new ViewPager.DataSource({
pageHasChanged: (p1, p2) => p1 !== p2,
});
// 实际的DataSources存放在state中
this.state = {
dataSource: dataSource.cloneWithPages(BANNER_IMGS)
}
}
而在render函数中,ViewPager的使用也是相当简单的。详细写法例如以下:
<ViewPager
style={{height:130}}
dataSource={this.state.dataSource}
renderPage={this._renderPage}
isLoop={true}
autoPlay={true}/>
当中:
style:样式,和其它控件设置方式相似
dataSource:即在构造函数中利用dataSource对象和图片数组常量,创建的真实dataSource
renderPage:方法类型,返回一段JSX。用于指定ViewPager每页的内容,该方法写法例如以下,切忌依据WebStorm的提示加上static!:
_renderPage(data, pageID) {
return (
<Image
source={data}
style={styles.page}/>
);
}
isLoop:是否循环播放。依照演示样例代码设置就可以
autoPlay:是否自己主动播放,依照演示样例代码设置就可以
locked: 设置为true即禁用ViewPager的点击
onChangePage: 页面切换的回调函数
renderPageIndicator: 自己定义指示器样式的渲染
animation:假设觉得原始的效果不惬意,能够在这个字段中设置一个函数,自己定义动画效果
当然,要记得给ViewPager和当中的item加入样式:
const styles = StyleSheet.create({
page: {
flex: 1,
height: 130,
resizeMode: 'stretch'
}
});
保存一下代码。在模拟器上看看效果吧
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
project源代码及资源文件:https://github.com/yuanguozheng/JdApp
本次Commit:https://github.com/yuanguozheng/JdApp/commit/2d1741bef1c7908c9e0d2f52c23210e8de2fcc7a
转载请注明出处:http://blog.csdn.net/yuanguozhengjust/article/details/50556700
React Native布局实践:开发京东client首页(三)——轮播图的实现的更多相关文章
- React Native入门——布局实践:开发京东client首页(一)
有了一些对React Native开发的简单了解,让我们从实战出发.一起来构建一个简单的京东client. 这个client是仿照之前版本号的京东client开发的Android版应用,来源于CSDN ...
- 微信小程序从零开始开发步骤(五)轮播图
上一章完成页面自定义分享,这一章来说说轮播图,最常见的一个轮播图,中间带小圆点,自动轮播. Swiper是滑动特效插件,面向手机.平板电脑等移动终端.能实现触屏焦点图.触屏Tab切换.触屏多图切换等常 ...
- phpcms首页实现轮播图
1.在你想要加轮播图的位置加入以下 <div id="flowDiagram" > <div id="button"> <span ...
- Luffy之Xadmin以及首页搭建(轮播图,导航)
1. 首页 1.1 轮播图 admin站点配置支持图片上传 pip install Pillow 默认情况下,Django会将上传的图片保存在本地服务器上,需要配置保存的路径.我们可以将上传的文件保存 ...
- 京东商城首页jquery轮播特效
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...
- 李洪强iOS开发之使用CycleScrollView实现轮播图
01 导入头文件,并且定义CycleScrollView属性 02 初始化,设置frame并且添加到collectionView上 03 调用方法并且设置轮播的图片
- 前端笔记之JavaScript面向对象(四)组件化开发&轮播图|俄罗斯方块实战
一.组件化开发 1.1组件化概述 页面特效的制作,特别需要HTML.CSS有固定的布局,所以说现在越来越流行组件开发的模式,就是用JS写一个类,当你实例化这个类的时候,页面上的效果布局也能自动完成. ...
- React Native – 使用 JavaScript 开发原生应用
前不久,Facebook 在F8开发者大会上正式开源了 React Native 项目.不过目前只有 iOS 版,Android 版还需要再等一段时间,这是最新的用 JavaScript 语言开发原生 ...
- 模仿东京首页banner轮播,京东新闻上下滚动动画实现(动画实现)
接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 首页banner动画实现 京东新闻上下动画实现 想着 ...
随机推荐
- Hive扩展功能(八)--表的索引
软件环境: linux系统: CentOS6.7 Hadoop版本: 2.6.5 zookeeper版本: 3.4.8 主机配置: 一共m1, m2, m3这三部机, 每部主机的用户名都为centos ...
- windows ping 某个网段,不能运行指定的软件
windows ping 某个网段,不能运行指定的软件 :begin @echo OFF color 0a Title Net Test Tool by:HRuinger Mode con cols= ...
- [Windows Server 2008] 查看ASP.net详细错误信息
★ 欢迎来到[护卫神·V课堂],网站地址:http://v.huweishen.com ★ 护卫神·V课堂 是护卫神旗下专业提供服务器教学视频的网站,每周更新视频. ★ 本节我们将带领大家:查看IIS ...
- TriAquae 是一款由国产的基于Python开发的开源批量部署管理工具
怀着鸡动的心情跟大家介绍一款国产开源运维软件TriAquae,轻松帮你搞定大部分运维工作!TriAquae 是一款由国产的基于Python开发的开源批量部署管理工具,可以允许用户通过一台控制端管理上千 ...
- What is the difference between Gradle Build and Gradle Sync?
Gradle Build helps you to compile your Android app into an APK while Gradle Sync will sync up all yo ...
- day13-迭代器、三元表达式、列表推导式、字典生成式、生成器与递归
目录 迭代器 可迭代对象 迭代器对象 for循环原理 三元表达式(三目表达式) 列表推导式 字典生成式 zip()方法 生成器 生成器表达式 递归 递归的两个阶段 迭代器 迭代器即迭代的工具,迭代是一 ...
- 微信 之jsapi实现支付
一.微信公众号号后台支付配置 附微信支付参考文档:https://pay.weixin.qq.com/wiki/doc/api/index.html 二.微信支付类封装 该类可以实现付款码支付.JSA ...
- 用shell编写dhcp自动获取脚本
#!/bin/bash#net=$(ifconfig ens33 | awk -F'[ .]+' '/inet\>/{print $3"."$4"."$5 ...
- @Order
1.Spring 4.2 利用@Order控制配置类的加载顺序, 2.Spring在加载Bean的时候,有用到order注解. 3.通过@Order指定执行顺序,值越小,越先执行 4.@Order注解 ...
- js的StringBuffer类
function StringBuffer(str){ var arr = []; str = str || ""; arr.push(str); this.append = fu ...