试图合并3*3图像网格中的4个表格单元格

Question

在这里输入图像描述

我想将2,3,5,6图像合并成一个图像，这样我的视图就像instagram探索选项卡的视图

现在我不知道如何建立这个观点。

你们能为我提出解决这个问题的任何想法或关键词吗？

Answer 1

如果您知道flexbox (我假设您是这样制作9盒版本的)，那么这个映像应该是有帮助的：https://imgur.com/a/Rdj7imm

相同颜色的框是兄弟，并根据布局中它们的权重来加权flex: 1或flex: 2。此外，根据直接子容器的布局需要，容器也是flexDirection: 'column'或flexDirection: 'row'：

<View style={{width: '100%', height: 300, flexDirection: 'column'}}>
  <View style={{flex: 2, flexDirection: 'row'}}>
    <View style={{flex: 1, flexDirection: 'column'}}>
      <View style={{flex: 1, backgroundColor: 'red', margin: 2}} />
      <View style={{flex: 1, backgroundColor: 'red', margin: 2}} />
    </View>
    <View style={{flex: 2, backgroundColor: 'red', margin: 2}} />
  </View>
  <View style={{flex: 1, flexDirection: 'row'}}>
    <View style={{flex: 1, backgroundColor: 'red', margin: 2}} />
    <View style={{flex: 1, backgroundColor: 'red', margin: 2}} />
    <View style={{flex: 1, backgroundColor: 'red', margin: 2}} />
  </View>
</View>