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所示。