我们使用FlatList来完成一行两列的渲染
|
1 2 3 4 5 6 |
<FlatList style={{margin:5}} data={this.state.items} numColumns={2} keyExtractor={(item, index) => item.id } renderItem={(item) => <Card image={item.item.gallery_image_url} text={item.item.name}/> } /> |
这个Card组件里只有一个view，并有一些样式：
|
1 |
<View style={{ flex: 1, margin: 5, backgroundColor: '#ddd', height: 130}} ></View> |
但输出结果不尽人意，最后一行居然，占据了行，如何办呢？
、
我的解决方法是，计算屏幕的宽度，并减去空白的宽度，除以2：
|
1 2 3 4 |
const {height, width} = Dimensions.get('window'); const itemWidth = (width - 15) / 2; <View style={{ flex: 1, margin: 5, backgroundColor: '#ddd', minWidth: {this.itemWidth}, maxWidth: {this.itemWidth}, height: 130}} ></View> |
其他解决方法可以参考：
https://tutel.me/c/programming/questions/43502954/react+native+flatlist+with+columns+last+item+width