React.js Native Flexlayout

Question

Ich versuche, ein Flexbox-Layout mit React.js zu machen.
Code:

for(let i = 0; i < 10; i++){ 
    articles.push(
    <View key={i} style={{height:120, flex:1}}> 
     <View style={{flexDirection: 'column' , flex:1, height:120}}> 
     <View style={{ flexDirection: 'row',flex: 1}}> 
      <Image style={{flex:1}} 
      resizeMode={'contain'} 
      source={{uri:'http://portapet.de/catalog/images/product_images/popup_images/1616_0.jpg'}} /> 
     </View> 
     </View> 
     <View style={{ flexDirection: 'column', flex: 1}}> 
     <View style={{flexDirection: 'row' , height: 10, flex:1, bottom: 0}}> 
      <Text style={{ color: 'deeppink', fontWeight: 'bold'}}>SturdiBag divided</Text> 
     </View> 
     <View style={{flexDirection: 'row' , height: 110, flex: 1, top:-30}}> 
      <Text style={{ flex: 1}}>Transporttasche für bis zu 2 Tiere. Versch. Farben</Text> 
     </View> 
     </View> 
    </View> 
) 
} 

Die Idee ist, dass das Bild auf der linken Seite ist und neben stimmt die Beschreibung und die Titel.
Mein Gedanke war, dass die beiden Spalten (l. 4 & 11) dies tun, aber ich bekomme nur dieses (Picture) Ergebnis.

Answer 1

Du overcomplicating es

// Define the "row", now every component you put in here 
// will be displayed horizontally 
<View style={{ flexDirection: 'row', flex: 1}}> 
    //Now define de image container 
    <View style={{ flex: 2 }}> 
    <Image style={{flex:1}} 
      resizeMode={'contain'} 
      source={{uri:'http://portapet.de/catalog/images/product_images/popup_images/1616_0.jpg'}} /> 
    </View> 

    // Now define your data container 
    <View style={{ flex: 8 }}> 
     <Text style={{ color: 'deeppink', fontWeight: 'bold'}}>SturdiBag divided</Text> 
    <Text style={{ flex: 1}}>Transporttasche für bis zu 2 Tiere. Versch. Farben</Text> 
    </View> 
</View>