Flexbox將不同大小的圖像對齊以填充區域

Question

我正在使用React Native的flexbox（而不是css flexbox）。我正在創建一個圖片庫，第一張圖片的尺寸要加倍，而其他圖片的尺寸要小一些。工程很好，但我有一個問題，第三個圖像顯示在新行中，而不是空白處。

是否有可能用flex-box實現這樣的行爲，以便第三個圖像會在第一個小圖像下面？

我嘗試了所有與對齊項目，自我對齊，flex方向但沒有成功的組合。如果需要，我可以提供一個我已經擁有的代碼的小例子。

Answer 1

我沒有充分響應的答案，但是這可能會有所幫助在這裏：

<View style={{ flexDirection: 'column' }}> 
     <View style={{ flexDirection: 'row' }}> 
      {this.renderPhoto(0)} 
      <View> 
      {this.renderPhoto(1)} 
      {this.renderPhoto(2)} 
      </View> 
     </View> 
     <View style={{ flexDirection: 'row' }}> 
      {render rest...} 
     </View> 
</View> 

Answer 2

試試這個組件。也許它會幫助你 https://xudafeng.github.io/autoresponsive-react/