rn - collapsible tab
구현 방법
1. top부분은 collapse 되는 component는 absolute이다.
2. vertical scrollview는 top부분만큼 top padding을 준다. <- height가 있는 빈 component를 주는 방법이 더 낫다. 나의 경우에는 scrollview의 padding을 건들면 children의 높이를 잘 계산하지 못해서 잘리는 이슈가 있었다.
https://stackoverflow.com/questions/43255548/reactnative-scrollview-will-not-scroll-to-the-bottom
ReactNative ScrollView will not scroll to the bottom
3. 각 scrollview의 scroll sync를 맞추어야 한다. (0 ~ header가 완전히 접히는 높이까지)
아래 링크의 코드를 보는게 이해가 더 빠를거 같아서, 간단하게 설명을 마친다.
https://github.com/Kwonkunkun/react-native-collapsible-component-with-tab-view
GitHub - Kwonkunkun/react-native-collapsible-component-with-tab-view
주의사항
collapsible되는 section과 tab section은 이 구현사항으로는 scroll event가 먹지 않는다. 만약에 그 구현사항을 원한다면, 밑의 링크의 pointerEvent를 적절히 사용하면 될거같으니 참고하길 바란다.
https://reactnative.dev/docs/view
npm 모듈로도 배포해놓았다.
https://www.npmjs.com/package/react-native-collapsible-component-with-tab-view