TIL: RN | React Navigation Android / iOS 렌더링 차이

Lumpen·2023년 3월 20일
0

ReactNavigation

목록 보기
9/14

React Navigation 에서 nesting navigation 사용 시
OS 별 렌더링 차이가 있었다

Android 의 경우 네비게이션 탭 접근 시
해당 탭에 등록되어있는 각걱 stack 의 default 페이지가
한 번씩 전부 렌더링 된 후 캐싱이 된다
top 1 - middle 3 - bottom 3 의 중첩 네비게이션이 있다고 가정하면

top 1 번 탭에 접근 시
1-1-1, 1-2-1, 1-3-1 이렇게 세 개의 네비게이션이 전부 렌더링 되는 것 같다

iOS 의 경우 1-1-1 만 렌더링 된다

위 경우 webview 통신으로 모달을 띄울 때 큰 문제가 되었는데
Android 에서만 3회의 postMessage 가 가기 때문에
한 번 요청에 3가지의 응답을 onMessage 하게 된다
이 경우는 기능상 굉장히 큰 문제가 되기 때문에

react navigtaion 의 useIsFocused 를 사용하여
isFocused 된 곳만 렌더링 하도록 하여 해결..

import { useIsFocused } from '@react-navigation/native';

if (!isFocused) return null;
profile
떠돌이 생활을 하는. 실업자는 아니지만, 부랑 생활을 하는

0개의 댓글