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/