홈>

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

여기에 이미지 설명을 입력하십시오

2,3,5,6 이미지를 하나의 이미지로 병합하여 내보기가 Instagram 탐색 탭의보기처럼 보이도록하고 싶습니다.

이제이보기를 구축하는 방법에 대한 아이디어가 없습니다.

이 문제를 해결하기 위해 아이디어 나 키워드를 제안 할 수 있습니까?

react-native

  • 답변 # 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>

관련 자료

  • 이전 프리즘 주입이 Prism Unity와 작동하지 않습니다
  • 다음 sqlite - Python의 SQLite3에서 자리 표시자를 비우려면 어떻게해야합니까?