フレックスボックスで項目をアライメントする

Question

私はビューをリアクションネイティブでアライメントしようとしていますが、すべてのビューを画面の50％にしたいと思います。以下のような何か：

私の状態は次のとおりです。

this.state = { 
    companies: [ 
     {logo_url: require("../../../img/company_logos/ald.png")}, 
     {logo_url: require("../../../img/company_logos/arval.png")}, 
     {logo_url: require("../../../img/company_logos/businesslease.png")}, 
     {logo_url: require("../../../img/company_logos/dieterenusedcars.png")}, 
     {logo_url: require("../../../img/company_logos/psa.png")}, 
     {logo_url: require("../../../img/company_logos/remarketing_center.png")}, 
     {logo_url: require("../../../img/company_logos/vdfin.png")} 
    ] 
} 

そしてrenderメソッドで：

render(){ 
    return (
     <View style={{flex: 1, flexDirection: 'row'}}> 
        {this.state.companies.map(company => { 
         return (
          <View style={{width: Dimensions.get('window').width * 0.5, height: 150}}> 
           <Image source={company.logo_url} style={{width: Dimensions.get('window').width * 0.5, height: 100}}/> 
          </View> 
         ); 
        })} 
       </View> 
    ) 
} 

しかし、私は最初の2つのだけのロゴを参照してください。

画面上に他の場所がない場合は、2番目の行に移動するのではなく、すべての項目が1つの行に表示される可能性があります。

アドバイスはありますか？

Answer 1

他の誰かが同じ問題を抱えている場合。

私は親にView

<View style={{flex: 1, flexDirection: 'row', flexWrap: "wrap"}}> 

を flexWrap: "wrap"を追加することによってそれを解決し