Question

我希望并排显示两个图像，而不是另一个图像的底部。这是我的代码：

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

但它没有按预期工作。我在这里缺少什么？

Answer 1

临时使用查看代替内容解决。但问题仍然存在于Native-Base内容中。

Answer 2

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.

内容基本弹性方向内容不起作用

2 个答案: