React.js Native 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＆amp; 11）这样做，但我只得到这个（Picture）结果。

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>