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

【问题标题】：Flexbox align images with different size to fill the areaFlexbox 对齐不同大小的图像以填充区域
【发布时间】：2016-08-23 04:44:38
【问题描述】：

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

是否可以使用 flex-box 实现这样的行为，使第三张图片低于第一张小图片？

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

【问题讨论】：

标签： react-native flexbox

【解决方案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>

【讨论】：

非常感谢，我使它与您的解决方案一起使用。

【解决方案2】：

试试这个组件。也许它会帮助你 https://xudafeng.github.io/autoresponsive-react/

【讨论】：

稍后我会研究它，但我想我会尝试只使用简单的 View 组件，因为我需要使图片可拖动、可排序等。