Any idea for implementing a grid layout like the following image.
答案取决于您要显示的数据。我想这是一个无限列表，向下滚动时会加载更多项目。如果是这种情况，你需要输入 3ListView-s 在 a 内ScrollView
标记将如下所示：
<View style={styles.wrapper}>
<ScrollView contentContainerStyle={styles.container}>
<ListView
contentContainerStyle={styles.list}
dataSource={this.state.dataSourceColumn1}
/>
<ListView
contentContainerStyle={styles.list}
dataSource={this.state.dataSourceColumn2}
/>
<ListView
contentContainerStyle={styles.list}
dataSource={this.state.dataSourceColumn3}
/>
</ScrollView>
</View>Wrapper View将帮助您拉伸块以适合整个区域。从样式的角度来看，您可以使用 Flexbox 来解决该任务：
wrapper: {
flex: 1
},
container: {
flexDirection: 'row',
paddingHorizontal: 5
},
list: {
flex: 1,
flexDirection: 'column',
paddingVertical: 10,
paddingHorizontal: 5
}诀窍是我们将每一列视为容器内的一行。尝试使用填充物和alignItems样式以实现一致的间距。
现在棘手的部分是处理dataSource适当地。这个想法是有 3dataSource-s 处于组件状态。这样，每当获取数据时，您都必须手动检查它并将其分为三个源。
请注意，方便onEndReached附带的ListView此处不可用，因此您必须捕获用户到达末尾ScrollView为了知道何时需要新的获取。但这是一个不同的问题，我相信已经在其他地方得到了回答。
如果网格是有限的，并且您不需要向其中放入更多项目，那么事情会更简单。只需按照上述方式分割数据并使用 3View-s 带有嵌套项目而不是ListView-s。其背后的原因是ListView带有一种设置方法rowHasChanged条件，它通过从不渲染未更改的列表项来提高性能。如果列表是有限的，你实际上并不需要它。