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,
}

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

- Nimila Hiranya

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样式中来实现。

- John Whitley

---

此外，我在搜索如何在水平FlatList上居中项目时遇到了这个问题，并且这个方法非常有效。但是，当列表填满时，无法向任何一侧滚动列表，而是保持在中心位置。我通过对contentContainerStyle进行条件设置来解决了这个问题，只有在元素数量小于屏幕上可以容纳的元素数量时才会添加此条件。例如，如果您的屏幕上可以容纳4个元素，则执行contentContainerStyle={elements.length < 4 && styles.listView}。 - jhm

Answer 2

this.renderItem应该是一个渲染行的函数。你的行应该设置它所需的样式。类似这样：

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

renderItem: (item) {
  <ItemRow item={item} />
}

然后在ItemRow组件中：

render: () {
  <View style={flexDirection: 'row', justifyContent: 'center'}>
    <Text>{this.props.item.name</Text>
  </View>
}

- eyal83

---

嗨@eyal83，如果您使用View添加样式，那么它是有效的。我只是想知道是否可能将对齐方式添加到ListView本身。无论如何，谢谢。干杯。 - Nimila Hiranya

视图样式需要使用{{而不是{。 - Maysam Torabi