[ReactNative] 접힘 펼침 버튼과 영역 만들기

Today, What I learned?

프로젝트를 진행하며 버튼을 클릭할 때마다 뮤지컬의 상세 설명 이미지가 접고 펼쳐지는 부분이 필요했다.

collapsible view 같은 라이브러리도 있는 듯했지만, 간단하게 구현하고 싶어서 state를 이용했다.

이 과정에서 겪었던 시행착오를 정리해본다.

 

접힘, 펼침 버튼

접고 펼쳐지는 부분은 팀원분이 state로 잘 구현해 주셨다.

const [isMoreButton, setMoreButton] = useState(false);

isMoreButton에 따라서 이미지가 들어가는 영역이 보이고 감춰지도록 했다.

 {isMoreButton && (
        <MoreDetail width={SCREEN_WIDTH}>
          <DetailImg
            style={{ resizeMode: 'stretch' }}
            source={{
              uri: `${musicalData?.dbs?.db[0].styurls[0].styurl[0]}`,
            }}
          />
        </MoreDetail>
)}

처음에 저 영역은 뮤지컬 정보 영역 컴포넌트 안에 있었는데, 이렇게 변경되었을 때 이미지가 다른 영역의 이미지까지 침범하게 된다는 문제가 있었다.

 

 

그래서 이미지 영역을 아예 컴포넌트 바깥으로 뺐다.

       <MoreButton
              onPress={() => {
                setMoreButton(!isMoreButton);
              }}
            >
              {isMoreButton ? (
                <TempText>접기</TempText>
              ) : (
                <TempText>상세보기</TempText>
              )}
            </MoreButton>
          </InfoPart>
        ))}
      </InfoTotalPart>

      {isMoreButton && (
        <MoreDetail width={SCREEN_WIDTH}>
          <DetailImg
            style={{ resizeMode: 'stretch' }}
            source={{
              uri: `${musicalData?.dbs?.db[0].styurls[0].styurl[0]}`,
            }}
          />
        </MoreDetail>
      )}

 

 

또 이미지가 최소 몇천 픽셀의 긴 이미지이다 보니 ScrollView 안에 있을 때 이미지가 나오지 않는 현상이 있었다.
이미지 컴포넌트에 resize:: 'stretch' 라는 속성을 주어 이미지 사이즈를 컨트롤할 수 있었다.

 style={{ resizeMode: 'stretch' }}

 

 

그래서 View 컴포넌트로 이미지를 감싸고, 완전하진 않지만 기기별 가로사이즈에 따라 높이를 조금 조정할 수 있도록 했다.

const MoreDetail = styled.View`
  width: 90%;
  height: ${(props) =>
    props.width <= 375 ? SCREEN_HEIGHT * 8 + 'px' : SCREEN_HEIGHT * 9 + 'px'};
  padding: 10px 0;
  margin: 0 auto;
`;

 

 

최종적으로 완성된 부분은 이렇다. 부족한 부분이 있긴 하지만 state로 구현한 점에 만족스럽다!