ios - 在 react native 中居中对齐 ListView 的内容

Question

我使用 ListView 列出了一些元素，但它们都是左对齐的。如何在不使用另一个 View 包装 ListView 的情况下将它们居中对齐？

ListView 的代码

<ListView
   dataSource={this.state.dataSource}
   renderRow={this.renderItem}
   style={styles.listView}
/>

ListView 样式

listView: {
   paddingTop: 20,
   paddingBottom: 20,
}

如何做到这一点？提前致谢。

Answer 1

您可以通过使用 contentContainerStyle ListView 属性将所需的 flexbox 样式直接应用到 ListView 的内部容器来解决这个问题，如下所示:

<ListView
  dataSource={this.state.dataSource}
  renderRow={this.renderItem}
  contentContainerStyle={styles.listView}
/>

// ...    

var styles = StyleSheet.create({
   listView: {
     flex: 1,
     justifyContent: 'center',
   },
});

同样，当您需要通过将 alignItems: 'center' 添加到 listView 样式来使两个轴居中时，这也适用。