[react native]2x2 card 섹션

코드왕·2024년 1월 14일
  1. 2x2 카드 섹션 만들기

TouchableOpacity 2x2로 잘 배치한다
핵심은 flex-wrap을 통해서 큰 div를 만들고
각 카드의 크기를 wp,hp를 이용해서 고정값으로 지정해준다.

        <View className="flex mx-4 justify-between flex-wrap flex-row">
          {destinationData.map((elem, index) => {
            return (
              <TouchableOpacity
                key={index}
                style={{ width: wp(44), height: wp(60) }}
                className="mb-3"
              >
                <Image
                  source={elem.image}
                  style={{ width: wp(44), height: wp(60), borderRadius: 35 }}
                ></Image>
              </TouchableOpacity>
            );
          })}
        </View>
profile
CODE DIVE!

0개의 댓글