거의 알고리즘 일기장
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
If I try to scroll to the bottom of my ScrollView, it bounces back to its default position and won't let me view the entirety of its content. My ( truncated ) setup is fairly simple : <View&...
stackoverflow.com
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
Contribute to Kwonkunkun/react-native-collapsible-component-with-tab-view development by creating an account on GitHub.
github.com
주의사항
collapsible되는 section과 tab section은 이 구현사항으로는 scroll event가 먹지 않는다. 만약에 그 구현사항을 원한다면, 밑의 링크의 pointerEvent를 적절히 사용하면 될거같으니 참고하길 바란다.
https://reactnative.dev/docs/view
View · React Native
The most fundamental component for building a UI, View is a container that supports layout with flexbox, style, some touch handling, and accessibility controls. View maps directly to the native view equivalent on whatever platform React Native is running o
reactnative.dev
npm 모듈로도 배포해놓았다.
https://www.npmjs.com/package/react-native-collapsible-component-with-tab-view
react-native-collapsible-component-with-tab-view
<h1 align="center">Welcome to react-native-collapsible-component-with-tab-view 👋</h1> <p> <a href="https://www.npmjs.com/package/react-native-collapsible-component-with-tab-view" target="_blank"> <img alt="Version" src="https://img.shields.io/npm/v. Lat
www.npmjs.com
'react-native' 카테고리의 다른 글
| android에서만 network request failed 에러가 나는 경우 with react native (0) | 2022.06.29 |
|---|---|
| 프론트 테스트 찍먹기 with react natvie (0) | 2022.06.29 |
| android upload key 분실 해결 (0) | 2022.02.03 |
| react-natvie android debug test에서는 잘 되는데, release test시 앱 들어가자 마자 팅기는 현상이 있을때 (0) | 2022.01.29 |
| React Native를 이용한 사이드 프로젝트 만들기 -7. 감동실화 app store 2전 3기 (0) | 2022.01.28 |
