Ios 在react native中居中对齐ListView的内容

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

列表视图的代码

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

---

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

this.renderItem应该是一个呈现行的函数。您的行应设置所需的样式。比如说：

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

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

renderItem：（项目）{
}

然后在ItemRow组件中：

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

render:（）{
{this.props.item.name
}

您可以通过使用

contentContainerStyle

ListView道具将所需的flexbox样式直接应用于ListView的内部容器来解决此问题，如下所示：

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

// ...    

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

// ...    
var styles=StyleSheet.create({
列表视图：{
弹性：1，
为内容辩护：“中心”，
},
});

---

同样，当您需要通过添加

alignItems将两个轴居中时，此功能也可以使用。
Hi@eyal83，是的，如果您使用视图添加样式，此功能也可以使用。我只是想知道是否可以将对齐添加到listView本身。谢谢。干杯。查看样式需要{{而不是{除此之外，我还遇到了一个问题：当没有足够的项目填满屏幕宽度时，如何将水平平面列表中的项目居中。这非常有效。但是，当列表填满时，列表无法滚动到任何一侧，但在拉动时会不断将焦点重新集中到中心。我通过在
contentContainerStyle
其中只有当元素数量小于屏幕上可以容纳的元素数量时才会添加此项。即，如果有4个元素适合您的屏幕，则执行
contentContainerStyle={elements.length<4&&styles.listView}
<ListView
  dataSource={this.state.dataSource}
  renderRow={this.renderItem}
  contentContainerStyle={styles.listView}
/>

// ...    

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