1

我想并排显示两个图像,而不是在另一个图像的底部。这是我的代码:

 <Content style={{flexDirection: 'row', flexWrap: 'wrap'}}>
     <Image
        key={data[0]['id']}
         source={{ uri: data[0]['image']['url']}}
         style={{
           width: Dimensions.get('window').width * 0.2,
           height: 120,
           }}
      />
     <Image
       key={data[1]['id']}
       source={{ uri: data[1]['image']['url']}}
       style={{
         width: Dimensions.get('window').width * 0.2,
         height: 120,
         }}
     />           
 </Content>

但它没有按应有的方式工作。我在这里想念什么?

4

2 回答 2

1

通过使用View而不是Content临时解决。但是问题仍然存在于 Native-Base Content。

于 2017-04-24T06:08:38.160 回答
0
Avoid flexWrap and use flex.

<Content style={{flexDirection: 'row', flex:1}}> // Note flex.
  <Image
     key={data[0]['id']}
     source={{ uri: data[0]['image']['url']}}
     style={{
       flex: 0.5, // Give the 50% of the width to this image.
       height: 120,
       }}
   />
  <Image
    key={data[1]['id']}
    source={{ uri: data[1]['image']['url']}}
    style={{
      flex: 0.5, // Give the 50% of the width to this image.
      height: 120,
     }}
 />           

I haven't really tested this code. But it should work fine. Thanks.
于 2017-04-24T08:59:17.863 回答