네이티브 웹뷰를 사용하기 전에 알아야 할 내용

반응형

작년에 저는 웹뷰를 사용하여 HTML 이메일을 표시하는 리액트 네이티브 앱을 개발했습니다. 그 과정에서 저는 해결하는데 오랜 시간이 걸린 흔치 않은 문제에 직면했습니다.

이 글의 저의 목적은 여러분이 직면할 수 있는 문제와 해결 방법을 보여줌으로써 여러분의 시간을 절약하는 것입니다.

문제 1: WebView 동적 높이

응답 네이티브 웹 뷰는 콘텐츠를 기반으로 확장할 수 있는 <보기 />처럼 자체 높이를 설정할 수 없습니다.

웹뷰가 높이를 가질 수 있는 유일한 방법은 웹뷰에 특정 높이를 제공하는 것입니다.

 

여기서는 웹뷰 로딩이 끝난 후 injectionJavascript propect를 사용하여 스크립트를 삽입하여 콘텐츠 높이를 얻은 다음 웹뷰 높이를 업데이트했습니다.

문제 2: Webview가 Android에서 앱을 손상시킬 수 있습니다.

이것은 찾기가 까다로웠고, 몇몇 화면을 탐색하는 동안 앱에서 예기치 않은 충돌이 발생했는데, 처음에는 경험 많은 네이티브 개발자가 할 일을 하고, adb logcat 명령을 실행하고, 충돌의 원인이 무엇인지 디버깅하는 데 몇 시간을 보냈습니다.

다행히도 우리는 우리의 문제를 해결하는 GitHub 문제를 발견했고 그 해결책은 단지 웹뷰가 포함된 화면에서 내비게이션 애니메이션을 비활성화하는 것이었다.

 

다른 사람에게 효과가 있을 수 있는 다른 반응 탐색 및 웹 뷰 충돌 수정 사항이 있습니다. 자세한 내용은 이 반응 네이티브-유튜브-iframe 문서를 참조하십시오.

문제 3: 웹 보기 [Android]에서 로컬 HTML 파일 가져오기

웹 뷰 내에서 로컬 HTML 파일을 가져오는 것은 엑스포와 베어 리액션 네이티브 간에 다릅니다.

베어 리액트 네이티브 프로젝트에서는 안드로이드 자산에 파일을 추가하고 가져오기만 하면 됩니다.
여기서 전체 해결 방법을 확인하십시오.

엑스포 프로젝트에서 우리는 안드로이드 폴더에 접근할 수 없기 때문에 당신은 이 해결 방법을 사용할 수 있습니다.

 

문제 4: 이전 Android 버전에서 웹 보기를 테스트합니다.

만약 당신이 자바스크립트가 포함된 사용자 정의 HTML 파일을 추가하고 있다면, 제가 안드로이드 버전 8에서 웹뷰를 깨트리는 옵션적인 변경과 같은 새로운 자바스크립트 기능을 사용하던 것처럼 이전 버전에서 웹뷰를 테스트해 보세요.

를 읽어 주셔서 감사합니다.

이 기사가 예상치 못한 웹 뷰 문제에 대해 도움이 되기를 바랍니다

 

깃허브 | 트위터 twitter