[ FrontEnd / React Native ] ScrollView 스타일 옵션
리액트 네이티브 기반의 프로젝트를 진행하던 중,
버튼을 화면의 제일 하단으로 배치하고 나머지 영역은 콘텐츠로 채우는 디자인을 퍼블리싱하게 되었습니다.
<View>, <SafeAreaView> 태그를 최상단에 작성했을때, 이 태그와 최하단 버튼에 아래와 같이 flex : 1 을 주면 원하는 대로 스타일이 적용되었습니다.
test: {
flex:1,
}
그런데, <ScrollView> 태그를 최상단에 작성 후, 위와 같이 스타일을 주었으나 적용되지 않았습니다.
알고나면 쉬운 해결 방법이지만 무엇이 문제인지 모를 때는 답답한 상황입니다..!
이번 글에는 <ScrollView> 태그를 최상단에 작성했을 때, 최하단으로 버튼을 정렬하는 방법을 공유하려 합니다.
먼저, 제가 디자인 받은 시안은 아래와 같습니다.
텍스트 콘텐츠 영역이 <ScrollView> 태그로 되어있습니다.
[ 시도했던 해결 방안 ]
위 문제를 겪고 제가 시도해서 해결했던 방법을 작성하도록 하겠습니다.
1.position: ‘absolute’ 사용하여 위치 배치
버튼에 position: ‘absolute’ 와 bottom: 0 을 주어 위치를 배치합니다.
2. 최상단 태그를 <View> 또는 <SafeAreaView> 로 사용
최상단 태그를 <View> 또는 <SafeAreaView> 로 하고 <ScrollView> 를 그 안에 넣어주는 것입니다. 그리고 똑같이 스타일을 주면 됩니다.
3.contentContainerStyle 을 사용
<ScrollView
style={styles.test}
contentContainerStyle={{ flex:1, justifyContent:’space-between’ }}
/>
[ 참고 자료 ]
https://stackoverflow.com/questions/44656712/align-button-to-bottom-in-scrollview
블로그 구독자 문의 주소 : info@weirdsector.co.kr
LABBIT을 운영하는 Team 위어드섹터 만나러 가기그로스 해킹 파트너, LABBIT 바로가기