javascript - react native : How to apply ListView's contentContainerStyle to renderRow() to create grid while having renderHeader()?

Question

我正在努力遵循这个:ListView grid in React Native但也有 renderHeader() 。当我同时拥有 renderHeader() 和 renderRow() 时

contentContainerStyle={{flexDirection: 'row', flexWrap: 'wrap'}}

，整个ListView受影响，左移，renderRow()消失。

但是当我取出 renderHeader() 时，它完美地创建了 renderRow() 的网格，没有任何问题。那么，我怎样才能使用 ListView 的 contentContainerStyle 来影响 renderHeader() 来创建网格，同时也有 renderHeader()？

return (
  <View style={{flex: 1}}>
    <ListView
      contentContainerStyle={{flexDirection: 'row', flexWrap: 'wrap'}}
      dataSource={this.state.dataSource}
      renderRow={this.renderRow.bind(this)}
      renderHeader={this.renderHeader.bind(this)}
    />
  </View>
);

提前致谢!

Answer 1

此刻，ListView把所有东西都粘在 <ScrollView contentContainerStyle>{renderHeader}{renderRow}{renderRow}{renderFooter}</ScrollView> 里查看结构。牢记这一点将有助于解释您看到的格式问题。

我认为目前最好的选择是用 {width: Dimensions.get('window').width} 标记标题的样式, 以确保它用完一整行(或任何 <ListView> 的宽度。

我在使用 {alignSelf: 'center'} 时仍然遇到问题在我的 ListView内容，因此标题的大小也会影响/更改 renderRow 内容的对齐方式。但如果您不这样做，就不会有任何问题。