react-native-webview 라이브러리 사용하기

chichi·2024년 3월 17일

프로젝트를 진행하면서 배너의 navigate를 잘못 구현했던 적이 있는데, 그 때 아래처럼 사용했었다

navigation.navigate(PATH_POPUP_WEBVIEW_PAGE, { uri: item.navigateLink }) *이전에 잘못 쓴 코드

이 코드를 사용해서 navigate를 하게 되면, 웹 뷰로 페이지가 출력되는데

웹 뷰로 이어지는 동작과 웹 뷰 라이브러리에 대해 좀 더 이해하기 위해 기록하고자 한다

우선 프로젝트 내 App.tsx 를 보면 아래처럼 정의되어 있다

              <Stack.Screen
                name={utilsPath.PATH_POPUP_WEBVIEW_PAGE}
                component={PopupWebViewPage}
                options={{
                  presentation: 'modal',
                }}
              />

POPUP_WEBVIEW_PAGE 는 App.tsx에 정의된 것처럼 모달 형태로 출력하며,

프로젝트에서 사용하고 있는 PopupWebViewPage 는 react-native-webview 의 Webview로 외부 URL을 표시하고,

웹뷰의 사용자 에이전트를 커스터마이징하여, 특정 웹 사이트에서 요구하는 사용자 식별 정보를 포함시킬 수도 있다.

`react-native-webview` 의 활용

크게는 상단의 네비게이션 바 (공유 + 뒤로가기 버튼) 와 Webview로 구성되어 있다.

1. 뒤로가기 버튼

navState 상태값을 선언,
아래에 서술할 onNavigationStateChange 옵션에 사용해 뒤로가기 여부 결정 가능
- 웹뷰 내 뒤로가기 가능하면 웹뷰 내 뒤로가기
- 그렇지 않으면 앱 이전 화면으로 이동 ( navigation.goBack() )

2. 공유 버튼

웹뷰 공유 버튼을 클릭했을 경우 onShare 함수 실행
- 메타데이터 등을 설정해서 내보낼 수 있다

3. 대망의 `WebView`

프로젝트에서는 아래와 같은 속성들을 사용해 웹 뷰를 구현했다.

injectJavascriptCode (레퍼런스 링크)

웹 뷰에 주입시키는 역할
프로젝트에서는 동영상 재생 관련 설정 조정에 사용

가이드에서는 아래처럼 사용

const INJECTED_JAVASCRIPT = `(function() {
    window.ReactNativeWebView.postMessage(JSON.stringify(window.location));
})();`;

<WebView
  source={{ uri: 'https://reactnative.dev' }}
  injectedJavaScript={INJECTED_JAVASCRIPT}
  onMessage={this.onMessage}
/>;

onShouldStartLoadWithRequest 웹 뷰 내 요청 처리를 위해 사용
- 웹 뷰에서 다른 동작이 트리거 되는 역할
- 웹 뷰에서 딥링크를 열 수 있게 함
  - 다른 회사와의 협업을 위함 (앱 스킴, 다이나믹 링크로 앱 연결 한 회사의 링크를 열기 위한 조치)
  - 웹과 앱이 합쳐진 느낌
- true / false 반환해서 특정 요청이 로드되어야 하는지 결정함
osAgent 플랫폼이 iOS면 iOS에 맞는 UserAgent 할당을 위해 사용
- 특정 웹 사이트에서 요구하는 사용자 식별 정보를 포함
- 어떤 기기의 유저인지 확인 및 기록
- 추첨 이벤트를 할 때 (ex: 유저당 1개 지급) 필요
  - 앱에 있는 정보를 이 웹뷰에 넣어서 중복 참여를 막기 위해 사용
그 외 옵션들
- setSupportMultipleWindows : 웹 뷰가 여러 창을 지원할지 여부
- sharedCookiesEnabled : 웹뷰가 앱과 동일한 쿠키를 공유할 지
- overScrollMode : ‘never’로 설정 시 스크롤 뷰 끝점에 도달해도 오버스크롤 효과 보여주지 않음
- onShouldStartLoadWithRequest : 위에 서술
- onNavigationStateChange : 위에 서술 / 네비게이션 상태 변경 시 마다 호출 (setNavState 실행, 뒤로 갈 수 있는지)
- onContentProcessDidTerminate : 웹뷰 렌더링이 비정상 종료시 (프로젝트에서는 리로드 실행)
- allowsInlineMediaPlayback : 인라인 미디어 재생 허용 여부 (웹 콘텐츠 내에서 재생)
- mediaPlaybackRequiresUserAction : 미디어 재생 전 유저 액션이 필요한지 (프로젝트에서는 false라서 자동 미디어 재생)
- allowsFullscreenVideo : 비디오 전체 화면 재생 여부 결정
- originWhitelist : 허용하는 웹 뷰의 URL
  
  웹뷰가 로드할 수 있는 URL의 출처(origin)를 지정하는 데 사용
  
  웹뷰에서 로드할 URL의 보안과 관련이 있으며, 특정 출처의 URL만 허용하거나 차단할 수 있게 한다
  
  가이드 (링크) 에서는 아래처럼 설명하고 있다
```
	//only allow URIs that begin with https:// or git://
<WebView
  source={{ uri: 'https://reactnative.dev' }}
  originWhitelist={['https://*', 'git://*']}
/>
```