react-native center slider

react native에서 슬라이더를 구현할 일이 생겼다.

하지만, 내가 원하는 타입의 슬라이더는 존재하지않았다.

보통의 경우 다 이런식의 형태만 슬라이더 라이브러리만 존재했다. 

 

하지만, 내가 원하는 형태는 아래와 같은 형태이다.

 

 

1. 문제

가장 큰 문제는 위와같은 라이브러리를 찾지 못했다는 것..

 

2.  해결책 

( 1 ) 직접 구현

처음에는 pangesturehandle를 통해 구현을 직접하려고 했다.

idea ) 아래와 같이 여러 view layer를 쌓아 handler에 따라 늘리고 줄이고 시도

문제 - pangesturehandle에 따라 빠르게 view의 넓이를 변경 시킬 때 계산의 오차로 인해 원하는 값이 나오지 않았다. 몇번이고 수정하고 디테일을 살려봤지만, 실패.

 

( 2 ) 슬라이더 라이브러리 활용

idea ) 위와 같이 view를 layer를 쌓으면서 구현하려 하였지만, 어려웠고 slider를 쌓아서 구현해보기로 했다.

https://github.com/ptomasroos/react-native-multi-slider

GitHub - ptomasroos/react-native-multi-slider: Android and iOS Pure JS react native multi slider

이 라이브러리를 이용.

 

1. 일단 아래와 같은 multi slider를 깔아준다. marker의 값은 0으로 한다.

출처 : https://github.com/ptomasroos/react-native-multi-slider

이 레이어의 역할은 선택된 영역을 표시하는 구간이다.

 

2. 이 슬라이더 위에 하나의 슬라이더를 더 올린다.

조건은 선택영역, 비선택 영역 모두 투명색으로 한다. 투명으로 함으로써 아래의 slider가 노출이된다.

이 레이어의 역할은 단순 마커의 value을 가져오는 역할을 한다. 

 

이 마커의 현재 값을 뒤에 있는 레이어의 벨류를 조정한다. 투명으로 했기 때문에 밑의 슬라이더가 보이고 원하는 슬라이더 타입이 나타나게 되는 것이다.

 

성공.

구현하는데 너무 어려웠다..

 

가운데 움푹 파인 부분은 뒤 레이어 마커를 조정하면서 조절할 수 있다.

 

나처럼 이를 구현하고자 하는 사람에게 도움을 주고자 코드 제공.