리액트네이티브에 웹뷰를 연동시켜서 작업하고 있었는데
탭 루트 스크린에서는 자신이 어디에 위치하고 어떤 상태가 켜져있는지를 기억하고 있어서 안드로이드 백버튼으로 뒤로 갓다가 다시 들어오게되면
웹뷰에서 띄워놓은 모달이 닫히지 않는 상황이 발생했다.
이 부분을 해결하기 위해
- 웹뷰에서는 모달이 열렸을 때 postMessage를 이용해 앱한테 모달이 켜져 있다고 알려주고 (웹 -> 앱)
- 앱에서는 안드로이드 back button이 눌렸을 때
뒤로가기가 아닌 모달이 꺼져야 되는 스크린에서 아래와 같은 처리를 해주었다.모달이 켜져있는지 확인하고 만약 모달이 켜져있다면 (if)
1) 뒤로가기 버튼이벤트를 무효화시키고,
2) app에서 모달의 on,off 상태를 관리하고 있는 state의 값을 변경해주고,
3) 웹에게 modal을 닫아달라고 요청해야 했다. (앱 -> 웹)
const ref = useRef<CustomWebViewRef>(null);
const { isOpen, setIsOpen } = useContext(ModalContext);
useEffect(() => {
if (isOpen) {
BackHandler.addEventListener('hardwareBackPress', () => {
setIsOpen(false);
ref.current?.postMessage({
type: 'CLOSE_MODAL',
payload: {},
});
return true;
});
}
}, [isOpen]);react-native에서 제공되는 BackHandler에
eventListener를 추가할 수 있는데 hardwardBackPress 이벤트는
true를 리턴하게 될 때 뒤로가기 버튼기능을 무효화 시킨다
웹에서 받아온 modal의 상태값은 앱에서 context로 관리하고,
만약 모달이 열려있다면
현재 모달의 상태값을 false로 바꿔주고
웹에게 모달을 닫으라고 알려주어서 안드로이드 뒤로가기 이벤트를 막아주고 원하는 방식으로 구현하였다.
