在本机反应中将ListView的内容居中对齐答案

【问题标题】：Center Align contents of a ListView in react native在本机反应中将ListView的内容居中对齐
【发布时间】：2015-11-18 07:29:15
【问题描述】：

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

ListView 的代码

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

列表视图样式

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

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

【问题讨论】：

标签： ios css listview react-native

【解决方案1】：

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

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

// ...    

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

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

【讨论】：

除此之外，当没有足够的项目来填充屏幕宽度时，我来到了这个问题，搜索如何在我的水平 FlatList 上居中项目，这很好用。但是，当列表填满时，列表无法滚动到任何一侧，但在拉动时会一直重新聚焦到中心。我用contentContainerStyle 的条件解决了这个问题，如果元素数量小于屏幕上可以容纳的元素数量，它只会添加这个。即，如果 4 个元素适合您的屏幕，请执行 contentContainerStyle={elements.length < 4 && styles.listView}

【解决方案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，是的，如果您使用视图来添加样式，那是有效的。我只是想知道是否可以将对齐添加到它自己的 ListView 中。不管怎么说，还是要谢谢你。干杯。
查看样式需要 {{ 而不是 {