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内容的对齐方式。但如果你不这样做，你就不应该有任何问题。

React Native：如何将renderView的contentContainerStyle应用于renderRow（）以在创建renderHeader（）时创建网格？

1 个答案: