Question

我使用ListView列出了一些项目，但它们都是左对齐的。如何对齐它们而不使用另一个View包装ListView？

ListView代码

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

ListView样式

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

怎么做？提前谢谢。

Answer 1

您可以使用Meteor.methods({ postInsert: function(postAttributes) { check(Meteor.userId(), String); check(postAttributes, { title: String, postContent: String, timeToEnable: Date, timeDisplay:String, year: Number, month: Number, day: Number, hours: Number, timeString : String, postNow: Date }); var user = Meteor.user(); var post = _.extend(postAttributes, { userId: user._id, author: user.username, submitted: new Date() }); var postId = Posts.insert(post); return { _id: postId }; } }); ListView道具将所需的Flexbox样式直接应用到ListView的内部容器中来解决此问题，如下所示：

contentContainerStyle

同样地，当您通过将<ListView dataSource={this.state.dataSource} renderRow={this.renderItem} contentContainerStyle={styles.listView} /> // ... var styles = StyleSheet.create({ listView: { flex: 1, justifyContent: 'center', }, });添加到alignItems: 'center'样式来使两个轴居中时，这也适用。

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

中心对齐原生的ListView内容

2 个答案: