[react-native] 화면 너비를 넘어가서 텍스트가 잘릴 때 해결방법

결론부터 말하면 flex-wrap: wrap 속성을 적용해 보길 권합니다. 부모 컨테이너를 넘어서지 않게 잡아주는 역할을 하기 때문입니다. 다음 예시를 통해서 살펴볼 수 있습니다.

<ScrollView>
      {data.posts.data.map((post) => (
        <>
          <Wrapper key={post.title + post.nickname}>
            <InnerWrapper>
              {/*<Thumbnail />*/}
              <RightWrapper>
                <TopInnerWrapper>
                  <TypeText type={post.postPrefixCode}>
                    [{COMMUNITY_LANGUAGE_CODE[post.postPrefixCode]}]
                  </TypeText>
                  <Title>{post.title}</Title>
                </TopInnerWrapper>
                <BottomInnerWrapper>
                  <NickNameText>{post.nickname}</NickNameText>
                  <Dot />
                  <CreatedDateText>{post.createdAt.split(' ')[0]}</CreatedDateText>
                  <Dot />
                  <LikeSmall />
                  <LikeCountText>{post.likeCount}</LikeCountText>
                  <Dot />
                  <ViewSmall />
                  <ViewCountText>{post.viewCount}</ViewCountText>
                </BottomInnerWrapper>
              </RightWrapper>
              <Comment>
                <CommentText>{post.commentCount}</CommentText>
              </Comment>
              {/*<CommentTail />*/}
            </InnerWrapper>
          </Wrapper>
          <Line />
        </>
      ))}
    </ScrollView>

 

초록색: InnerWrapper

space-between을 통해 댓글 카운트를 맨 오른쪽으로 배치하는 역할을 한다.

const InnerWrapper = styled(View)`
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  border: 1px solid green;
`;

 

파란색: TopInnerWrapper

여기에 width값을 준 이유는 Title에 주게 되면 앞의 type이 가변적 길이를 가지기 때문에 Type을 포함하여 고정길이를 주기 위해서 이다. width 값을 주지 않으면 댓글 카운트를 밀어내 버린다.

const TopInnerWrapper = styled(View)`
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 300px;
  padding-bottom: 4px;
  align-items: flex-start;
  border: 1px solid blue;
`;

 

빨간색: Title

flex-wrap: wrap 속성을 줌으로서 부모 컨테이너를 벗어나면 자동으로 줄 바꿈이 되도록 하였다.

const Title = styled(Text)`
  display: flex;
  flex-wrap: wrap;
  font-size: 15px;
  color: #1d1e02;
`;

 

레이아웃 결과