반응 네이티브에서 3 * 3 이미지 그리드의 4 테이블 셀을 병합하려고합니다

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>