[React-Native] Carousel 만들기

리액트 네이티브에서 간단한 carousel을 만들었다.

처음에는 react-native-snap-carousel을 사용해서 구현하려고 했는데,

내가 원하는대로 제대로 작동이 안되기도 했고, 간단한 carousel이라서 

굳이 라이브러리까지 사용하지 않아도 될 것 같아서 직접 만들어 보기로 했다.

마침 직접 구현한 좋은 글을 발견하여, 아래 글을 참고해서 만들어봤다.

 

참고글:

https://maruzzing.github.io/study/rnative/React-Native-%EC%BA%90%EB%9F%AC%EC%85%80(carousel)-%EB%A7%8C%EB%93%A4%EA%B8%B0/

 

 

 

 

내가 구현해야 하는 carousel은 팝업 내에 존재해야 했기 때문에, 팝업 내에 만들었고

팝업의 타이틀도 슬라이드에 따라 달라져야 했기 때문에 팝업의 타이틀도 유동적으로 받아올 수 있도록 했다.

슬라이드는 각 하나씩만 표시되고, 팝업 내 영역에 꽉 차도록 ITEM_WIDTH로 잡아두었다.

슬라이드가 하나씩 스와이프되고, 좌우 화살표 버튼으로도 움직일 수 있도록 했다.

그리고 하단에 pagination도 구현했다.

복잡하지 않은 간단한 UI라서 FlatList로 나름 쉽게 구현이 가능했다.