[React-native] 내용이 긴 content 줄바꿈 처리 - flexShrink

KJH·2022년 1월 20일
0

타이틀과 내용이 있는 간단한 레이아웃 작업 진행 중 내용이 길어지는 content 출력 작업 중
줄바꿈 처리가 되지 않아서 해결하는 중이었다.

시도1 : flexWrap : 'warp' -> 동작 안함

시도2 : flexShrink -> 정상 동작

  titleView: {
    flexShrink: 0,
    flexBasis: 150,
  },
  contentView: {
    flexGrow: 1,
    flexShrink: 1
  }

<View style={styles.titleView}>
  <Text>{menu.title}</Text>
</View>
<View style={styles.contentView}>
  <Text>{menu.content}</Text>
</View>

출처 KimJaeHee님 블로그 : 모던 레이아웃

profile
항상 공부하는 N년차 개발자입니다.

0개의 댓글