Demo展示
1.gif
今天学习的是用ListView来实现九宫格这样的一个效果。你可能会说，直接用一个View组件包裹着Image和Text也可以做出来。确实是的，不过之前我们在学习Image组件时，仿美团首页顶部效果时，有那么多item需要加载，若是有更多的item项，我们还是全部把它写好，全部一次性渲染？很显然这没有达到复用和提高性能的期望。
昨天初步学习了ListView的使用，RN中对于ListView的渲染是进行过的渲染优化的，不过ListView的列表数据一般是垂直方向，那怎么实现横向的列表了？在学习View组件时，它有一个属性：flexDirection，用来设置一个组件在View中排列的方向，并且当一行摆放不下的时候，我们需要其它组件摆放到第二行，此时我们可以用到View的另外一个属性：flexWrap。但是，对于ListView来说，我们不能直接通过Style来使用他们，而须通过它的一个属性：contentContainerStyle。
Demo实现
这里只贴一下重点代码，上篇文章有说明使用ListView的一些步骤
constructor(props) {
super(props);
var data = this.props.data;
var ds = new ListView.DataSource({rowHasChanged: (r1, r2)=> r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows(data)
};
}
renderRow(rowData) {
return (
<TouchableOpacity
activeOpacity={0.5}
onPress={()=>this.showDialog(rowData.title)}
style={styles.itemContainer}
>
<View >
<Image
source={{uri: rowData.icon}}
style={{width: 80, height: 80}}
/>
<Text style={styles.textStyle}>{rowData.title}</Text>
</View>
</TouchableOpacity>
);
}
----------------------------
listViewContent: {
flexDirection: 'row',
flexWrap: 'wrap'
},
好了，今天的ListView的学习就学完了。下篇文章我们将继续学习ListView，通过一个固定ListView头部的Demo来研究一下ListView的高级用法，敬请期待。
