Reactネイティブリストビューのグリッドレイアウトで、リストビュー要素を個別に整列して追加する

Question

行スタイルよりもボックススタイルで表示する必要があるListview要素の配置に関する問題があります。絵では、リストビューのcontentContainerStyle小道具で使用されるこのスタイルシートのコードを用いて製造された現在の状態を、見ることができます：行ラップが起こった後に

ListViewStyle: { 
    flexDirection: 'row', 
    flexWrap: 'wrap', 
} 

私は何を達成したいが、新しい行を開始せずにリストビューの要素をラップされ、その結果、リストビュー要素の上部にスペースがなくなります。

このきれいを達成するためにどのように任意のアイデア？ありがとうございました！

Answer 1

誰かが同じことをしようとしていたhere。しかし基本的な考え方は、flexの値を持つListViewコンポーネントの子要素を設定したいということです。

は、次のコードを見てください：

import React, { Component } from 'react'; 
 
import { AppRegistry, View } from 'react-native'; 
 

 
class AlignItemsBasics extends Component { 
 
    render() { 
 
    return (
 
     <View style={{flex: 1, flexDirection: 'row'}}> 
 
     <View style={{ 
 
      flex: 1, 
 
      flexDirection: 'column', 
 
     }}> 
 
      <View style={{flex:1, backgroundColor: 'red'}} /> 
 
      <View style={{flex: 2, backgroundColor: 'blue'}} /> 
 
      <View style={{flex:1, backgroundColor: 'green'}} /> 
 
      <View style={{flex:3, backgroundColor: 'grey'}} /> 
 
      <View style={{flex: 2, backgroundColor: 'skyblue'}} /> 
 

 
     </View> 
 
     <View style={{ 
 
      flex: 1, 
 
      flexDirection: 'column', 
 
     }}> 
 
      <View style={{flex:5, backgroundColor: 'pink'}} /> 
 
      <View style={{flex: 2, backgroundColor: 'red'}} /> 
 
     </View> 
 
     </View> 
 
    ); 
 
    } 
 
}; 
 

 
AppRegistry.registerComponent('AwesomeProject',() => AlignItemsBasics);

あなたが同じ幅の2つの列を持つようにしたいので、あなたは2つの囲む景色をメインビューを持って、各同じflex値。各ビューの内側には、異なるflex値を使用して、異なる高さの画像を表示できます。私はコンポーネントをハードコーディングして、下のリンクにどのように表示されるかを示しています。動的な入力を生成する何らかのタイプのレンダリング関数に置き換えることができます。

コードは動作中ですhere