javascript - React Native:如何在具有renderHeader()的同时将ListView的contentContainerStyle应用于renderRow()以创建网格？

我正在尝试遵循: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>
);

先感谢您!

最佳答案

目前，ListView将所有内容粘贴在<ScrollView contentContainerStyle>{renderHeader}{renderRow}{renderRow}{renderFooter}</ScrollView>视图结构中。记住这一点将有助于解释您看到的格式问题。

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

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

关于javascript - React Native:如何在具有renderHeader()的同时将ListView的contentContainerStyle应用于renderRow()以创建网格？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38532434/