具有不同高度項目的網格佈局（React Native）

Question

任何關於實現如下圖像的網格佈局的想法。

Answer 1

答案取決於您要顯示的數據。我想這是一個無限列表，它向下滾動加載更多的項目。如果是這樣的話，你需要把3 ListView -s內ScrollView

的標記看起來像這樣：

<View style={styles.wrapper}> 
 
    <ScrollView contentContainerStyle={styles.container}> 
 
     <ListView 
 
      contentContainerStyle={styles.list} 
 
      dataSource={this.state.dataSourceColumn1} 
 
     /> 
 
     <ListView 
 
      contentContainerStyle={styles.list} 
 
      dataSource={this.state.dataSourceColumn2} 
 
     /> 
 
     <ListView 
 
      contentContainerStyle={styles.list} 
 
      dataSource={this.state.dataSourceColumn3} 
 
     /> 
 
    </ScrollView> 
 
</View>

包裝View會幫助你伸展塊，以適應整個地區。但從造型點，你可以用Flexbox的解決任務：

wrapper: { 
 
    flex: 1 
 
}, 
 
container: { 
 
    flexDirection: 'row', 
 
    paddingHorizontal: 5 
 
}, 
 
list: { 
 
    flex: 1, 
 
    flexDirection: 'column', 
 
    paddingVertical: 10, 
 
    paddingHorizontal: 5 
 
}

訣竅是，我們對待每一個列在容器內一排。玩填充和alignItems造型，以實現一致的間距。

現在棘手的部分是妥善處理dataSource。這個想法是在組件狀態下有3個dataSource-s。通過這種方式，每當數據被提取時，您都必須手動將其分解爲三個來源。

注意隨附ListView得心應手onEndReached將不可用在這裏，所以你必須抓住用戶到達ScrollView結束，以便在需要的時候取的新認識。但這是另一個我認爲已經在其他地方得到回答的問題。

如果網格是有限的，你不需要投入更多的項目，事情更簡單。只需按照上述方式拆分數據，並使用嵌套項目而不是ListView -s即可使用3 View -s。其原因在於ListView提供了一種設置rowHasChanged條件的方法，該條件通過永不呈現未更改的列表項目來提高性能。如果名單是有限的，你並不需要那麼做。