React.js原生Flexlayout

Question

我正在嘗試使用React.js制作Flexbox布局。
碼：

 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:''}} />
        </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>
  )
}

這個想法是圖片在左邊，右邊在描述和標題旁邊。
我的想法是兩個專欄（l。4＆11）可以做到這一點，但我只能得到（ 圖片 ）結果。

Answer 1

您太復雜了

// 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>