[RN] 웹뷰를 여러 개 띄었을 때 강제종료되는 버그

개요

아이폰을 개발을 하다가 이제 안드로이드도 테스트 해볼까? 하고 안드로이드를 켜보았는데...

앱이 강제종료가 되었다.

 

아니 이게 뭐야 갑자기 무슨 날벼락이야

근데 사실 솔직히 말하자면, 안드로이드 에뮬레이터 켜보기를 소홀히 한게 맞긴한데

앱이 강제종료까지 되어야 하는 문제인가 싶기도 한데

내가 잘못한게 맞기도 하지...

 

다행히도 특정 페이지에 진입할 때에만 강제종료가 되었고

범위를 좁혀가며 찾아보니... 웹뷰를 여러 개 띄었이었다

 

나의 경우, 하나의 컴포넌트가 웹뷰를 가지고 있고 그런 컴포넌트를 여러 개 나열하였는데

그러면서 한페이지에 웹뷰가 여러 개 위치하게 되었고 

앱이 강제종료되었다

 

아 물론 웹뷰가 여러 개인 페이지가 하나 더 있었지만 거기에선 터지지 않았고.....

본문

문제의 원인을 찾는 데 도움과 혼동을 준 2가지 케이스가 있었다.

 

1. 왜 아이폰에선 잘 되고, 안드로이드에서는 잘 안되는가

2. 어떤 페이지에선 웹뷰 2개를 켜면 잘 되고 이 페이지에서는 웹뷰를 2개만 켜더라도 앱이 꺼지는가

 

원인을 알았지만.... 기억이 나지 않는다...

웬만하면 다 저장해놓는데 이게 정답이 맞는지 아닌지 아리까리해서 저장을 안해놓았다

후.... 다음부턴 저장을 잘해놓아야지

 

1. 왜 아이폰에선 잘 되고, 안드로이드에서는 잘 안되는가

잘 기억이 안나지만 원인이 무엇이었나면,

안드로이드의 경우, 웹뷰가 로드될 때 영역을 잘 잡아주지 못하는 버그가 있다고 한다

그래서 다른 웹뷰와 로드 영역이 겹치게 되어서 충돌이 나 앱이 자동으로 꺼지게 된다고 한다

 

2. 어떤 페이지에선 웹뷰 2개를 켜면 잘 되고 이 페이지에서는 웹뷰를 2개만 켜더라도 앱이 꺼지는가

별다른 이유는 없었다

 

웹뷰가 잘 켜지는 페이지는

하나의 웹뷰가 페이지 내에 있었고

또 다른 하나의 웹뷰가 페이지 내의 탭뷰 안에 위치해 있었다

해결방법

1. androidHardwareAccelerationDisabled true 주기

2. 웹뷰에 style 추가하기 : opacity:0.99, minHeight:1

 

스타일을 추가하는 것으로 버그가 해결된다고...?

생각이 들어 1번을 선택하고 싶었지만 이 글을 읽자마자 2번을 적용했고 이젠 잘 작동한다!

 

well androidHardwareAccelerationDisabled={true} has a huge trade-off in perfomance in my case, now i'm using the opacity solution...

url(https://github.com/react-native-webview/react-native-webview/issues/811#issuecomment-667245566)

참고 (한국어 페이지도 있다)

https://eloquence-developers.tistory.com/156

[React Native] WebView 강제 종료되는 버그

https://github.com/react-native-webview/react-native-webview/issues/131

multiple webview hangs the app · Issue #131 · react-native-webview/react-native-webview

https://github.com/react-native-webview/react-native-webview/issues/811

Android is crashing when "WebView" is wrapped by "View" · Issue #811 · react-native-webview/react-native-webview