3.4 完善商品列表——ListView组件在完善了搜索框和轮播广告之后，对电商应用的首页的改造已经初见成效。最后，我们要让商品列表的内容也变得更加丰富。3.4.1 对图片资源进行重构添加商品图片到ch04项目中，相对ch04根目录的文件路径为./product-image-01.jpg。此时，如果不断地添加图片文件的话，根目录的结构会变得越来越“糟糕”，如图3.16所示。这时需要对图片资源进行一次重构，将所有图片放至专门的image文件夹中。重构之后，ch04项目的文件结构如图3.17所示。
 图3.16 根目录文件越来越多的ch04项目 图3.17 重构图片资源后的ch04项目结构由于图片文件的路径发生了变更，所以还需要修改引用图片的代码如下：
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代码如下。?提示：在实际开发中，一般都是先定义数据模型，然后再考虑具体功能的实现。01 const ds = new ListView.DataSource({ // 创建ListView.DataSource数据源02 rowHasChanged: (r1, r2) => r1 !== r203 });0405 export default class app extends Component {06 constructor(props) {07 super(props); 08 this.state = {09 dataSource: ds.cloneWithRows([ // 为数据源传递一个数组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 // 这里省略了重复的代码20 }, {21 image: require('./images/advertisement-image-01.jpg'),22 title: '商品10',23 subTitle: '描述10'24 }25 ],26 };27 }28 29 // 这里省略了没有修改的代码30 }
然后，在ListView组件的_renderRow()函数中添加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: 4030 },31 productText: {}, // 这里暂时未用到，且未设置样式32 productTitle: {}, // 这里暂未设置样式33 productSubTitle: {} // 这里暂未设置样式34 });
此时，商品列表的运行效果如图3.18所示。
图3.18 添加了图片和描述的商品列表3.4.3 商品布局的优化列表的雏形实现之后，就可以在此基础上做一些样式和布局上的优化了。优化的目标效果如图3.19所示。
按照上述结构，修改组件代码如下：
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
默认为"column"12 {rowData.title}
</Text>13 14 {rowData.subTitle}15 16 17 18 19 );20 }21 22 // 这里省略了没有修改的代码23 }
此时，应用的运行效果如图3.20所示。
图3.20 优化后的商品列表完成了列表的基本布局之后，接着优化样式。修改app.js代码如下。?提示：在实际开发中，先搭好架子再优化细节是一个良好且高效的开发习惯。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: 1019 },20 productTitle: {21 flex: 3,22 fontSize: 1623 },24 productSubTitle: {25 flex: 2,26 fontSize: 14,27 color: 'gray'28 }29 });
优化列表样式和布局后的效果如图3.21所示。
图3.21 优化样式和布局后的商品列表最后，为列表添加分割线。幸运的是，ListView组件已经为开发者提供了方法，即renderSeparator()函数，所以只要实现该函数即可。修改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 }
重新加载应用，添加分割线的商品列表效果如图3.22所示。
图3.22 添加分割线的商品列表至此，电商App的首页已经焕然一新。
相关资源：七夕情人节表白HTML源码(两款)