본문으로 건너뛰기

리액트 네이티브 - Movies app : Native Stack & Bottom tabs 적용하여 UI 만들기

· 약 3분
Seung hyo, Lee
Seung hyo, Lee
Front End Engineer @ Assistfit
목적
  1. React-navigation 적용 UI 만들기
    • Native-Stack
    • Bottom-tabs
  2. StyleSheet.absoluteFill
  3. Swiper 적용
오류 해결

UI 부분이라 오류가 딱히 없었다고 한다..

1. User Interface 만들기 / horizontal : 사이드(가로) 스크롤​

(원문에는 UI 시연 영상이 있었으나 동영상 서비스가 종료되어 옮기지 못했습니다.)

우선 UI는 빠르게 작업을 해 두고, 리팩토링을 하고 나서 스타일을 적용하겠다!

Emotion – @emotion/native

위 라이브러리를 통해 styled.component 스타일을 적용할 예정이라 미리 install을 했다.

web에서는 가로 스크롤을 상당히 어렵게 만들었던 기억이 있었는데..

<ScrollView horizontal={true}>{/* 들어갈 내용 */}</ScrollView>

RN에서는 아주 심플하게 <ScrollView/> 태그에 horizontal 이라는 속성을 true로 할당하면 영상처럼 사이드 스크롤이 가능하다.

세로 스크롤은 RN의 기본값으로 태그마다

  • display: flex
  • flex-direction: column

위 스타일이 기본값이므로 <ScrollView/> 태그 내에서는 자동적으로 세로로 스크롤이 된다!

2. StyleSheet.absoluteFill (RN absolute, 엘리먼트 또는 태그 겹치기)​

absoluteFill 적용 전

absoluteFill 적용 후

StyleSheet는 RN에 있는 기본 라이브러리 이지만 기존에는 const 변수명 = StyleSheet.create`~css style~`; 이런 식으로 자주 썼지만 StyleSheet에서 제공하는 absoluteFill 이라는 속성을 이용하면 번거롭게 포지션을 하나하나 지정해 주지 않고도 위 화면과 같이 바로 겹치게 적용 할 수 있다.

<Image
  style={StyleSheet.absoluteFill}
  source={{
    uri: "https://www.themoviedb.org/t/p/w220_and_h330_face/ga8R3OiOMMgSvZ4cOj8x7prUNYZ.jpg",
  }}
/>
<LinearGradient
  style={StyleSheet.absoluteFill}
  colors={["transparent", "black"]}
/>

위에서는 LinearGradient 라는 라이브러리를 사용하여 그라데이션 효과를 넣고, color: "white" 적용했다.

3. Swiper 적용하기​

GitHub - leecade/react-native-swiper: The best Swiper component for React Native.

위 Read.me 를 읽고 라이브러리를 설치했다. 적용은 아주 간단하다. 똑같이 Read.me 에 작성되어있는 import 구문을 가져오고, 원하는 태그의 상위에 <Swiper> 태그만 씌워주면 된다.

<Swiper height="100%" autoplay loop showsPagination={false}>
  <View>...</View>
  <View>...</View>
  <View>...</View>
</Swiper>

autoplay : 자동 슬라이드 효과 loop : 마지막 페이지 >> 첫페이지 (무한반복) showsPagination : 페이지네이션(파란색 페이지버튼)

여기서 Swiper에 들어가는 width와 height값이 flex: 1 로 들어가게 되어서 의도치 않게, 아래로 쭉 전체화면이 되었다...

공식 문서 내용

PropDefaultTypeDescription
width-numberIf no specify default enable fullscreen mode by flex: 1.
height-numberIf no specify default fullscreen mode by flex: 1.

그래서 **Swiper에는 height를 100%**로 주고, 자식 태그에 height를 따로 작성해줘야 한다!

조금 번거롭지만 이게 기본값이니 react-native-swiper를 사용한다면 어쩔 수 없는 부분이다.

4. 적용 UI​

(원문에는 적용 UI 영상이 있었으나 동영상 서비스가 종료되어 옮기지 못했습니다.)

최종 정리
  1. <ScrollView> 태그에 horizontal={true} 적용 시, 가로(사이드) 스크롤 적용
  2. StyleSheet에서 제공하는 absoluteFill 이라는 속성으로 간편하게 엘리먼트 겹치기 가능
  3. Swiper에 들어가는 width와 height값이 flex: 1이 기본값 이므로, 따로 사이즈 지정 필요