內容不能正常工作的原生基礎柔性方向

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

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. 

Answer 2

臨時使用查看，而不是內容解決。但問題仍然存在於Native-Base內容中。