[React-Native] webview에서 흰화면이 나오는 문제 해결(IOS)

DaYoung·2024년 8월 6일

React-Native

목록 보기
34/35
post-thumbnail

원인

react-native-webview 모듈에서 발생한 문제로
많은 리소스를 사용할 경우 등의 이유로 앱이 멈추는(crashing/freezing) 문제라고 한다.

stack overflow와 https://stackoverflow.com/questions/61723317/react-native-webview-process-terminated

velog에서 원인과 해결 방법을 찾을 수 있었다.
https://velog.io/@young_mason/React-Native-ios%EC%97%90%EC%84%9C-%ED%9D%B0%ED%99%94%EB%A9%B4%EC%9D%B4-%EB%9C%A8%EB%8A%94-%EB%AC%B8%EC%A0%9C

문제해결

onContentProcessDidTerminate={() => {
webviewRef.current?.reload();
}}

한줄만 추가해주면 간단하게 해결할 수 있었다!
webView를 강제 리로드 해주는거라 약간의 깜빡거림은 있지만 흰 화면 문제는 해결할 수 있었다.

 <WebView
     ref={webviewRef}
     source={{uri}}
     onMessage={handleWebViewMessage}
     onLoadEnd={onLoadEnd}
     onNavigationStateChange={onNavigationStateChange}
       onContentProcessDidTerminate={() => {
         webviewRef.current?.reload();
     }}
  />
profile
안녕하세요. 프론트앤드 개발자 홍다영입니다.

0개의 댓글