Попытка объединить 4 ячейки таблицы с сеткой изображений 3 * 3 в реагировать родной

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>