[React Native / swiper-view] 탭과 화면이 연동되는 스크롤 뷰

이번 포스팅에서는 리액트 네이티브에서 스크롤 뷰를 만드는 방법에 대해 설명하려고 합니다. 일반적으로 상단의 헤더가 가로폭 100퍼센트로 사이즈가 고정이고, 하단에 있는 뷰가 슬라이드 형식으로 이동하는 것에 대한 라이브러리는 많이 나와있습니다.

 

하지만, 이번 포스팅의 목적은 아래와 같이 화면이 넘어가면서 상단의 슬라이드의 포커스와 좌표가 이동하는 것입니다.

 

 

 

 

react-native-swiper-view 설치

npm install react-native-swiper-view

 

 

 

샘플 코드

<ScrollTabView
      tabList={[
        { name: "ALL", component: <Text style={textStyle}>ALL</Text> },
        {
          name: "SKIN CARE",
          component: <Text style={textStyle}>SKIN CARE</Text>,
        },
        { name: "MAKE UP", component: <Text style={textStyle}>MAKE UP</Text> },
        {
          name: "CLEANSING",
          component: <Text style={textStyle}>CLEANSING</Text>,
        },
        { name: "MASK", component: <Text style={textStyle}>MASK</Text> },
        { name: "BODY", component: <Text style={textStyle}>BODY</Text> },
        { name: "HAIR", component: <Text style={textStyle}>HAIR</Text> },
        { name: "NEW", component: <Text style={textStyle}>NEW</Text> },
        { name: "BEST", component: <Text style={textStyle}>BEST</Text> },
        { name: "BRAND", component: <Text style={textStyle}>BRAND</Text> },
        { name: "EVENT", component: <Text style={textStyle}>EVENT</Text> },
      ]}
    />

 

 

 

 

HorongD/react-native-swiper-view