Flexbox对齐不同大小的图像以填充该区域

Question

我使用的是React Native的flexbox（不是css flexbox）。我正在创建一个图像库，第一个图像必须是两倍大小，其余图像更小。效果很好，但我遇到的问题是第三张图片显示在新行中，而不是空白区域。

是否可以使用flex-box实现此类行为，以便第三张图像位于第一张小图像下方？

我尝试了所有组合对齐项目，自动对齐，弯曲方向，但没有成功。如果需要，我可以提供一个我已经拥有的代码的小例子。

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/