異なる高さのアイテムを持つグリッドレイアウト（React Native）

Question

次のイメージのようにグリッドレイアウトを実装するためのアイデア。

Answer 1

答えは、表示するデータによって異なります。私はこれがスクロールダウンでより多くのアイテムをロードする無限のリストだと思います。その場合は、あなたがマークアップは次のようになりますScrollView

内3つのListView -sを配置する必要があります。

<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あなたが合うようにブロックを伸ばすのに役立ちます全域。ビューのスタイリングポイントからは、フレキシボックスでタスクを解決することができます

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

トリックは、私たちがコンテナ内の行としてすべての列を扱うということです。一定の間隔を確保するために、パディングとalignItemsスタイリングで遊んでください。

今、難しい部分はdataSourceを適切に処理することです。考え方は、コンポーネントの状態で3 dataSource -sを持つことです。この方法でデータを取得したときは、手動で上書きして3つのソースに分割する必要があります。

ListViewに付属の便利なonEndReachedはここでは使用できないため、新しいフェッチがいつ必要なのかを知るために、ScrollViewの最後に到達するユーザーを捕まえなければなりません。しかし、それは私が他の場所ですでに答えられていると信じている別の質問です。

グリッドが有限で、より多くのアイテムを投げる必要がない場合は、より簡単です。上記の方法でデータを分割して、ListView-sの代わりに3 View -sをネストしたアイテムと使用します。その背後には、ListViewにはrowHasChangedの条件を設定する方法があり、変更されていないリスト項目をレンダリングしないことでパフォーマンスが向上します。リストが有限であれば、それは本当に必要ありません。