内容上的本机基础 flex 方向不起作用

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

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

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.

内容上的本机基础 flex 方向不起作用

Native base flex direction on Content not working

ios

react-native

native-base