3.4 完善商品列表——ListView組件
在完善了搜索框和輪播廣告之后，對電商應(yīng)用的首頁的改造已經(jīng)初見成效。最后，我們要讓商品列表的內(nèi)容也變得更加豐富。
3.4.1 對圖片資源進(jìn)行重構(gòu)
添加商品圖片到ch04項目中，相對ch04根目錄的文件路徑為./product-image-01.jpg。此時，如果不斷地添加圖片文件的話，根目錄的結(jié)構(gòu)會變得越來越“糟糕”，如圖3.16所示。
這時需要對圖片資源進(jìn)行一次重構(gòu)，將所有圖片放至專門的image文件夾中。重構(gòu)之后，ch04項目的文件結(jié)構(gòu)如圖3.17所示。

圖3.16 根目錄文件越來越多的ch04項目 圖3.17 重構(gòu)圖片資源后的ch04項目結(jié)構(gòu)

由于圖片文件的路徑發(fā)生了變更，所以還需要修改引用圖片的代碼如下：

01 export default class app extends Component {
02 constructor(props) {
03 super(props);
04 this.state = {
05 advertisements: [
06 {
07 image: require('./images/advertisement-image-

01.jpg')

08 }, {
09 image: require('./images/advertisement-image-

02.jpg')

10 }, {
11 image: require('./images/advertisement-image-

03.jpg')

12 }
13 ],
14 };
15 }
16
17 // 這里省略了沒有修改的代碼
18 }
3.4.2 重新定義商品模型
在添加好商品圖片之后，第一步就是要修改和重新定義商品模型，修改app.js代碼如下。
?提示：在實際開發(fā)中，一般都是先定義數(shù)據(jù)模型，然后再考慮具體功能的實現(xiàn)。
01 const ds = new ListView.DataSource({ // 創(chuàng)建ListView.DataSource數(shù)據(jù)源
02 rowHasChanged: (r1, r2) => r1 !== r2
03 });
04
05 export default class app extends Component {
06 constructor(props) {
07 super(props);
08 this.state = {
09 dataSource: ds.cloneWithRows([ // 為數(shù)據(jù)源傳遞一個數(shù)組
10 {
11 image: require('./images/advertisement-image-01.jpg'),
12 title: '商品1',
13 subTitle: '描述1'
14 }, {
15 image: require('./images/advertisement-image-01.jpg'),
16 title: '商品2',
17 subTitle: '描述2'
18 }, {
19 // 這里省略了重復(fù)的代碼
20 }, {
21 image: require('./images/advertisement-image-01.jpg'),
22 title: '商品10',
23 subTitle: '描述10'
24 }
25 ],
26 };
27 }
28
29 // 這里省略了沒有修改的代碼
30 }

然后，在ListView組件的_renderRow()函數(shù)中添加Image組件，修改app.js代碼如下：

01 export default class app extends Component {
02 // 這里省略了沒有修改的代碼
03
04 _renderRow = (rowData, sectionID, rowID) => {
05 return (
06 Alert.alert('你單擊了商

品列表', null, null)}>

07
08 09 style={styles.productImage}>
10
11 {rowData.title}

</Text>

12 {rowData.subTitle}

</Text>

13
14
15 );
16 }
17 }
18
19 const styles = StyleSheet.create({
20 // 這里省略了沒有修改的代碼
21 row: {
22 height: 60,
23 flexDirection: 'row',
24 alignItems: 'center'
25 },
26 productImage: {
27 marginLeft: 10,
28 width: 40,
29 height: 40
30 },
31 productText: {}, // 這里暫時未用到，且未設(shè)置樣式
32 productTitle: {}, // 這里暫未設(shè)置樣式
33 productSubTitle: {} // 這里暫未設(shè)置樣式
34 });

此時，商品列表的運行效果如圖3.18所示。

圖3.18 添加了圖片和描述的商品列表
3.4.3 商品布局的優(yōu)化
列表的雛形實現(xiàn)之后，就可以在此基礎(chǔ)上做一些樣式和布局上的優(yōu)化了。優(yōu)化的目標(biāo)效果如圖3.19所示。

按照上述結(jié)構(gòu)，修改組件代碼如下：

01 export default class app extends Component {
02 // 這里省略了沒有修改的代碼
03
04 _renderRow = (rowData, sectionID, rowID) => {
05 return (
06 Alert.alert('你單擊了商

品列表', null, null)}>

07
08 09 style={styles.productImage}>
10
11 // flexDirection

默認(rèn)為"column"

12 {rowData.title}

</Text>

13
14 {rowData.subTitle}
15
16
17
18
19 );
20 }
21
22 // 這里省略了沒有修改的代碼
23 }

此時，應(yīng)用的運行效果如圖3.20所示。

圖3.20 優(yōu)化后的商品列表
完成了列表的基本布局之后，接著優(yōu)化樣式。修改app.js代碼如下。
?提示：在實際開發(fā)中，先搭好架子再優(yōu)化細(xì)節(jié)是一個良好且高效的開發(fā)習(xí)慣。
01 const styles = StyleSheet.create({
02 // 這里省略了沒有修改的代碼
03 row: {
04 height: 60,
05 flexDirection: 'row',
06 backgroundColor: 'white'
07 },
08 productImage: {
09 width: 40,
10 height: 40,
11 marginLeft: 10,
12 marginRight: 10,
13 alignSelf: 'center'
14 },
15 productText: {
16 flex: 1,
17 marginTop: 10,
18 marginBottom: 10
19 },
20 productTitle: {
21 flex: 3,
22 fontSize: 16
23 },
24 productSubTitle: {
25 flex: 2,
26 fontSize: 14,
27 color: 'gray'
28 }
29 });

優(yōu)化列表樣式和布局后的效果如圖3.21所示。

圖3.21 優(yōu)化樣式和布局后的商品列表
最后，為列表添加分割線。幸運的是，ListView組件已經(jīng)為開發(fā)者提供了方法，即renderSeparator()函數(shù)，所以只要實現(xiàn)該函數(shù)即可。修改app.js代碼如下：

01 export default class app extends Component {
02 // 這里省略了沒有修改的代碼
03
04 render() {
05 // 這里省略了沒有修改的代碼
06
06 return (
07
08 // 這里省略了沒有修改的代碼
09
10 11 renderRow={this._renderRow}
12 renderSeparator={this._renderSeperator}/>

// 渲染分割線

13
14
15 );
16 }
17
18 // 這里省略了沒有修改的代碼
19
20 _renderSeperator(sectionID, rowID, adjacentRowHighlighted) {
21 return (
22 ${sectionID}-${rowID}} style={styles.divider}>

</View>

23 );
24 }
25 }
26
27 const styles = StyleSheet.create({
28 // 這里省略了沒有修改的代碼
29 divider: {
30 height: 1,
31 width: Dimensions.get('window').width - 5,
32 marginLeft: 5,
33 backgroundColor: 'lightgray'
34 },
35 // 這里省略了沒有修改的代碼
36 }

重新加載應(yīng)用，添加分割線的商品列表效果如圖3.22所示。

圖3.22 添加分割線的商品列表
至此，電商App的首頁已經(jīng)煥然一新。

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的《React Native移动开发实战》一一3.4 完善商品列表——ListView组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。