947
《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 17:02:20