《React Native移动开发实战》一一3.3 完善轮播广告——Image组件

3.3 完善轮播广告——Image组件
之前的轮播广告页面显示的是简单的文字和背景色,接下来添加一些好看的图片作为轮播广告。
React Native中用于图片显示的组件是Image。Image组件可以显示多种不同类型图片,包括网络图片、静态资源、临时的本地图片,以及本地磁盘上的图片(如相册)等。
3.3.1 使用网络图片
这里先使用网络图片来看看Image的用法和效果。修改app.js代码如下:

01 export default class app extends Component {
02 constructor(props) {
03 super(props);
04 this.state = {
05 advertisements: [ // 轮播广告数组
06 { // 数组中的每个成员描述了网络图片的url
07 url: 'https://img13.360buyimg.com/cms/jfs/t4090/228/
1399180862/217278/206073fe/5874e621Nc675c6d0.jpg'
08 }, {
09 url: 'https://img13.360buyimg.com/cms/jfs/t3937/
164/1340098884/295670/ca0ebbaf/58703afbN5336c28d.jpg'
10 }, {
11 url: 'https://img14.360buyimg.com/cms/jfs/t3190/
189/5382195407/297118/377d637e/586f5b7bN9c81c29c.jpg'
12 }
13 ],
14 };
15 }
16
17 // 这里省略了没有修改的代码
18
19 render() {
20 return (
21
22 // 这里省略了没有修改的代码
23
24
25 horizontal={true}
26 showsHorizontalScrollIndicator={false}
27 pagingEnabled={true}>
28 {this.state.advertisements.map((advertisement,
index) => {
29 return (
30
{() => Alert.alert('你单击了轮播图', null,
null)}>
31
Content}
32 source={{
33 uri: advertisement.url
34 }}>
35
36 );
37 })}
38
39
40 // 这里省略了没有修改的代码
41
42 );
43 }
44
45 // 这里省略了没有修改的代码
46 }
?注意:当使用新的模块或组件时(例如这里的Image)时,首先必须要在文件头导入该模块或组件import {Image} from 'react-native';,否则会发生无法找到变量Image的错误。
重新加载应用,此时使用网络图片的轮播广告效果如图3.11所示。

图3.11 使用网络图片的轮播广告
3.3.2 使用本地图片
除了使用网络图片,还可以将图片资源下载后添加到ch04项目中,使用本地图片。
首先,将上面用到的网络图片下载到本地,重命名为advertisement-image-01.jpg、advertisement-image-02.jpg以及advertisement-image-03.jpg,然后复制至ch04项目文件夹中,效果如图3.12所示。

图3.12 下载并添加图片到ch04项目
然后,修改代码中Image引用图片的方式,引用网络图片是设置Image组件source属性的url值,而引用本地图片可以直接设置Image组件的source属性,图片通过require方式加载,修改后的app.js代码如下:

01 export default class app extends Component {
02 constructor(props) {
03 super(props);
04 this.state = {
05 advertisements: [ // 轮播广告数组
06 {
07 image: require('./advertisement-image-01.jpg')
08 }, {
09 image: require('./advertisement-image-02.jpg')
10 }, {
11 image: require('./advertisement-image-03.jpg')
12 }
13 ],
14 };
15 }
16
17 // 这里省略了没有修改的代码
18
19 render() {
20 return (
21
22 // 这里省略了没有修改的代码
23
24
25 horizontal={true}
26 showsHorizontalScrollIndicator={false}
27 pagingEnabled={true}>
28 {this.state.advertisements.map((advertisement,
index) => {
29 return (
30
{() => Alert.alert('你单击了轮播图', null,
null)}>
31
Content}
32 source={advertisement.image}>
33
34
35 );
36 })}
37
38
39 // 这里省略了没有修改的代码
40
41 );
42 }
43
44 // 这里省略了没有修改的代码
45 }
?提示:引用本地图片资源时,需要格外注意require的图片文件路径,否则会发生找不到图片的错误。以上述代码为例, require('./advertisement-image-01.jpg')引用的文件路径是指,在ch04项目根目录下的advertisement-image-01.jpg。
使用本地图片的效果如图3.13所示。

图3.13 使用本地图片的轮播广告
3.3.3 添加指示器组件
给轮播广告换上了漂亮的图片之后,还差一个效果:当前页面指示器,效果如图3.14所示。
从图3.14中可以看出,指示器由圆点组成,圆点的个数即页面的数量,并且与当前页面序号相同的圆点会做颜色区分。
(1)在了解了指示器的原理之后,首先定义指示器中圆点的尺寸,修改app.js代码如下:

01 const circleSize = 8;
02 const circleMargin = 5;
03
04 export default class app extends Component {
05 // 这里省略了没有修改的代码

(2)在render()函数中的轮播广告中添加指示器组件,代码如下:

01 export default class app extends Component {
02 // 这里省略了没有修改的代码
03
04 render() {
05 const advertisementCount = this.state.advertisements.length;
// 指示器圆点个数
06 const indicatorWidth = circleSize * advertisementCount +
circleMargin advertisementCount 2; // 计算指示器的宽度
07 const left = (Dimensions.get('window').width - indicatorWidth)
/ 2; // 计算指示器最左边的坐标位置
08
09 return (
10
11 // 这里省略了没有修改的代码
12
13
14 horizontal={true}
15 showsHorizontalScrollIndicator={false}
16 pagingEnabled={true}>
17 {this.state.advertisements.map((advertisement,
index) => {
18 return (
19
{() => Alert.alert('你单击了轮播图', null,
null)}>
20
Content}
21 source={advertisement. image}>
22
23
24 );
25 })}
26
27
28 styles.indicator, {
29 left: left
30 }
31 ]}>
32 {this.state.advertisements.map((advertisement,
index) => {
33 return (
34 style={(index === this.state.currentPage)
35 ? styles.circleSelected
36 : styles.circle}/>);
37 })}
38
39
40 // 这里省略了没有修改的代码
41
42 );
43 }
44
45 // 这里省略了没有修改的代码
46 }

在上述代码中,首先通过指示器圆点的个数计算出了指示器的宽度,然后通过屏幕和指示器的宽度,计算出了指示器最左边的坐标位置。
(3)修改样式和布局的代码如下:

01 const styles = StyleSheet.create({
02 // 这里省略了没有修改的代码
03 indicator: {
04 position: 'absolute',
05 top: 160,
06 flexDirection: 'row'
07 },
08 circle: {
09 width: circleSize,
10 height: circleSize,
11 borderRadius: circleSize / 2,
12 backgroundColor: 'gray',
13 marginHorizontal: circleMargin
14 },
15 circleSelected: {
17 width: circleSize,
18 height: circleSize,
19 borderRadius: circleSize / 2,
20 backgroundColor: 'white',
21 marginHorizontal: circleMargin
22 },
23 // 这里省略了没有修改的代码
24 });

这里我们使用了一种新的布局方法absolute,即绝对布局。使用绝对布局时,组件的位置和尺寸必须明确定义,例如上述代码中top、left、width以及height。由于绝对布局并没有flex布局自适应屏幕的能力,所以在实际开发中,使用绝对布局组件的以上属性往往是通过计算动态得到的,例如上述代码中,指示器的宽度和最左边的坐标位置都是在获取屏幕宽度后,计算得到的。
?提示:在实际开发中,如果使用绝对布局,千万不要将位置和尺寸定义为固定值,否则将无法支持不同屏幕的适配。
(4)添加完指示器并配置好样式后,运行效果如图3.15所示。

时间: 2017-08-17

《React Native移动开发实战》一一3.3 完善轮播广告——Image组件的相关文章

《React Native移动开发实战》一一导读

前言 随着手机和移动互联网技术的日益成熟,移动应用的领域也从如何开发,发展到如何更高效.更低成本地开发.传统的原生平台(iOS.Android)开发技术虽然比较成熟,但由于开发效率和成本的限制,已经越来越无法满足移动互联网应用的开发需求. 所以,具有简单.迅速.跨平台的优势,而且基于Web开发语言和布局技术的React Native得以迅速流行,并一举夺得跨平台开发技术的头筹. 目前市场上大多数React Native书籍主要以翻译和讲解官方文档为主,并未从开发实际应用出发,通过典型案例来指导读

《React Native移动开发实战》出版啦

对不起,我来晚了 首先要感谢支持和关注我的朋友,感谢人邮的赵老师,还有公司的领导和同事,他们在我写作的过程中给了很多有用的信息,也给了很多有用的建议,为本书的写作提供了很大帮助.感谢,再次感谢!!! 工作6年多以来,一直想写一本自己的书,一方面是对自己工作经历的一个总结,也是对希望写一本书给曾经的自己一个交代,毕竟30岁的人了,搞不了几年的技术了. 我一直有写博客的习惯,喜欢将自己工作和生活的点滴写成博客,分享给大家.说说我写书的缘由吧,最近几年,特别是15年和16年,我朋友圈的好友陆续出了自己

《React Native移动开发实战》一一1.3 搭建React Native开发环境

1.3 搭建React Native开发环境 "磨刀不误砍柴工",在正式开发React Native应用之前,需要先搭建好React Native的开发环境.搭建React Native开发环境有以下几个主要步骤. 原生开发工具:iOS开发使用Xcode,Android开发使用Android Studio and SDK Tools. Node.js(https://nodejs.org/):React Native是借助Node.js,即JavaScript运行时来创建JavaScr

《React Native移动开发实战》一一1.1 看透React Native

1.1 看透React Native React Native(http://facebook.github.io/react-native/)第一次进入公众的视野是在2015年1月的React.js Conf(http://conf.reactjs. org/)上,随后,同年5月份,Facebook在F8 Conference(https://www. fbf8.com/)上正式宣布:React Native项目(如图1.1所示) 在Github开源.结果一天之内,就收获了5000多颗星,受关

《React Native移动开发实战》一一3.9 小 结

3.9 小 结截止本章,我们不仅开发了一个电商应用,还对已有的应用进行了以下优化? 代码重构:包括组件的复用.逻辑的简化以及扩展性的优化.? 样式美化:自定制了组件的样式.? 功能完善:为轮播广告添加指示器效果,为商品列表添加图片和详细说明,为应用添加更多React Native提供的组件.本书通过电商App的改造,学习了多个组件的使用,并带入了实际项目开发中的一些技巧,相信对初学者的学习有更好的指导作用.

《React Native移动开发实战》一一3.1 创建新的电商App

3.1 创建新的电商App之前创建了一个简单的电商项目,本节来实现对该项目的重构.3.1.1 移植旧电商项目(1)先创建React Native项目并安装依赖包. react-native init ch04 // 新建React Native项目ch04cd ch04npm install // 或者使用cnpm安装:cnpm install?小知识:npm install命令还可以简写成npm i,更多说明可以使用npm help install查看帮助文档.(2)将第2章ch03项目中的i

《React Native移动开发实战》一一第3章 React Native的组件(1)

第3章 React Native的组件(1)第2章中已经实现了电商应用的首页,虽然界面和功能看起来略简陋了点,但是麻雀虽小,五脏俱全,首页的整体布局和大概效果已经完整地呈现在我们面前了.接下来,在"夯实的地基"上,我们将继续"盖楼",为应用实现更多的功能和更好的体验.本章主要内容有: 移植旧的App项目. 学会重构现有代码. 完善第2章中的搜索框. 完善第2章中的轮播广告. 完善第2章中的商品列表. 实现页面跳转. 实现页面间的数据传递.

《React Native移动开发实战》一一3.4 完善商品列表——ListView组件

3.4 完善商品列表--ListView组件在完善了搜索框和轮播广告之后,对电商应用的首页的改造已经初见成效.最后,我们要让商品列表的内容也变得更加丰富.3.4.1 对图片资源进行重构添加商品图片到ch04项目中,相对ch04根目录的文件路径为./product-image-01.jpg.此时,如果不断地添加图片文件的话,根目录的结构会变得越来越"糟糕",如图3.16所示.这时需要对图片资源进行一次重构,将所有图片放至专门的image文件夹中.重构之后,ch04项目的文件结构如图3.1

《React Native移动开发实战》一一1.2 React Native的特点

1.2 React Native的特点 那么,作为跨平台应用开发的"新贵",React Native相比其他跨平台技术到底有哪些优势呢?1.2.1 其一:Learn Once, Write Anywhere 这句话是React Native官网(http://facebook.github.io/react-native/)对React Native的概述,简单明了地概括了React Native的最大特点和优点. 只需要学习React Native这一种开发方式(包括平台.语言和开发