[React-Native] ScrollView를 사용한 Native Picker 만들기

결과

---

 

Native Time Picker

---

서론

처음엔  React-Native 피커 중 가장 유명한 react-native-picker 라이브러리를 사용했다.

iOS에선 그나마 이쁘게 출력되었는데, Android는 전혀 다른 창으로 보여서 직접 만들기로 했다.

자료가 많지 않아서 애를 먹었다. 나와 같은 사람이 있으리라 생각하고 정리해볼 생각이다.

RN을 시작한 지 얼마 되지 않아 미흡하니 코드는 참고만 해주시면 감사하겠습니다🙏

 

---

본론

• 사용 스택
  • RN
  • StyledComponents
  • TypeScript
    
    
• 필요한 기능
  • Scroll 시 버튼 값 (ex 오전, 오후)이 칸에 고정되도록 출력되어야 한다.
  • 가운데에 위치한 버튼 값이 어떤 값인지 알아야 한다.
  • 분이 55에서 다음으로 넘어가면 0으로 변경되고 시간이 변해야 한다. (구현 X)

 

Scroll 시 버튼 값 고정되도록 출력

머리로는 어떻게 해야 할지 감이 잡히는데, 코드로 어떻게 해야 할지 막막했던 것 같다.

말로 요약하자면, Scroll Event에서 contentOffset.y / {Item Height}를사용하여 아이템에 따른 값을 가져왔다.

그 뒤에 useRef로 ScrollView의 y 값을 이동시켜 주었다.

아래는 minute의 예시이다.

 

const minute = [' ', 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, ' '];
// 가운대에 출력을 위해 처음과 끝에 빈 배열 추가

const [currentMinute, setCurrentMinute] = useState(0);
const refMinute = useRef(null);

//...중략

const handleMinuteOnScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
    const nextCurrent: number = Math.round(e.nativeEvent.contentOffset.y / BUTTON_HEIGHT);

    if (nextCurrent < 0) {
      return;
    }
    setCurrentMinute(nextCurrent);
    refMinute.current.scrollTo({y: nextCurrent * BUTTON_HEIGHT, animated: true});
  };
  
<ScrollView
      ref={refMinute}
      showsVerticalScrollIndicator={false}
      onScrollEndDrag={handleMinuteOnScroll}
      scrollEventThrottle={0}
      decelerationRate={'fast'}
      >
    	...
</ScrollView>

 

---

사용자가 선택한 값 불러오기

위에서 설명했듯이 [ Scroll Event에서 contentOffset.y / {Item Height}를사용하여 아이템에 따른 값을 가져왔다. ]
이 말은 분(Minute)으로 예를 들면 칸이 변함에 따라 아래와 같이 출력된다. (단 Math 함수를 통해 올림, 반올림, 내림을 했을 때)

빈칸 0
5      1
10    2
15    3
..

그렇다. 그냥 nextCurrent 값에 * 5를 해주면 끝난다. ( 오전, 오후는 함수를 만들어서 변환해 주었다.)

 

---

결론 및 느낀 점

머리로는 이래 이래 해서 하면 되겠다! 라고 떠오르는데 아직 코딩 실력이 못 따라가는 게 아쉽다.

라이브러리는 개발자로 지내면서 뗄 수 없을뿐더러 개발 시간 또한 단축시켜준다고 생각한다.

하지만 라이브러리 틀 안에 갇혀서 제한된 기능을 사용 하기보단,

필요할 때 직접 만들어서 사용할 수 있는 개발자가 되고자 노력 중이다.

물론 업무였지만..

 

---

참고 자료

https://reactnative.dev/docs/scrollview

ScrollView · React Native

https://infinitbility.com/react-native-scrollview-scroll-to-position

React native ScrollView scroll to position

https://velog.io/@bang9dev/React-Native-Scrollable-Time-Picker-%EB%A7%8C%EB%93%A4%EA%B8%B01

[React-Native] Scrollable Time Picker 만들기(1)

https://velog.io/@syoung125/3%EC%9B%94-%EC%9D%B8%ED%84%B4%EC%9D%BC%EC%A7%80-3-React-Native-animated-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0

3월 인턴일지 (3) 📝 : [React-Native] ScrollView로 간단한 carousel 구현하기!

https://stackoverflow.com/questions/59677122/how-to-get-scrollview-index

How to get scrollview index

https://velog.io/@mayinjanuary/React-Native-scrollview-%EC%9D%98-scrollTo-scrollToEnd-%EB%A9%94%EC%84%9C%EB%93%9C%EA%B0%80-%EC%9E%91%EB%8F%99%ED%95%98%EC%A7%80-%EC%95%8A%EB%8A%94-%EB%AC%B8%EC%A0%9C