Ausrichten von Elementen mit Flexbox in reagieren native

Question

Ich versuche, Ansichten in Native reagieren, und ich möchte, dass jede Ansicht 50% des Bildschirms ist. Etwas wie:

Mein Zustand ist:

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")} 
    ] 
} 

Und dann in der Methode machen:

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> 
    ) 
} 

Aber ich sehe nur die ersten zwei Logos.

Alle Elemente werden wahrscheinlich in einer Zeile angezeigt, anstatt in die zweite Zeile zu gehen, wenn auf dem Bildschirm kein Platz mehr ist.

Irgendwelche Ratschläge?

Answer 1

Falls jemand anderes das gleiche Problem hat.

Ich löste es durch flexWrap: "wrap" an die Mutter Zugabe View

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