首页 文章

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

提问于
浏览 次
0

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

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

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

Screenshot

react-native flexbox

2 回答

  • 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/

    回复于

相关问题