react native webview

react native webview

1. <MapView /> Component API

😅참조 GitHub - react-native-webview/react-native-webview: React Native Cross-Platform WebView

React Native WebView API Reference

React Native WebView API 참조

이 문서는 React Native WebView의 현재 공개된 속성 및 메서드를 정리합니다.

속성 색인

• source
• automaticallyAdjustContentInsets
• automaticallyAdjustsScrollIndicatorInsets
• injectedJavaScript
• injectedJavaScriptBeforeContentLoaded
• injectedJavaScriptForMainFrameOnly
• injectedJavaScriptBeforeContentLoadedForMainFrameOnly
• mediaPlaybackRequiresUserAction
• nativeConfig
• onError
• onRenderProcessGone
• onLoad
• onLoadEnd
• onLoadStart
• onLoadProgress
• onHttpError
• onMessage
• onNavigationStateChange
• onContentProcessDidTerminate
• onScroll
• originWhitelist
• renderError
• renderLoading
• scalesPageToFit
• onShouldStartLoadWithRequest
• startInLoadingState
• style
• containerStyle
• decelerationRate
• domStorageEnabled
• javaScriptEnabled
• javaScriptCanOpenWindowsAutomatically
• androidLayerType
• mixedContentMode
• thirdPartyCookiesEnabled
• userAgent
• applicationNameForUserAgent
• allowsFullscreenVideo
• allowsInlineMediaPlayback
• allowsAirPlayForMediaPlayback
• bounces
• overScrollMode
• contentInset
• contentInsetAdjustmentBehavior
• contentMode
• dataDetectorTypes
• scrollEnabled
• nestedScrollEnabled
• setBuiltInZoomControls
• setDisplayZoomControls
• directionalLockEnabled
• geolocationEnabled
• allowFileAccessFromFileURLs
• allowUniversalAccessFromFileURLs
• allowingReadAccessToURL
• keyboardDisplayRequiresUserAction
• hideKeyboardAccessoryView
• allowsBackForwardNavigationGestures
• incognito
• allowFileAccess
• saveFormDataDisabled
• cacheEnabled
• cacheMode
• pagingEnabled
• allowsLinkPreview
• sharedCookiesEnabled
• textZoom
• pullToRefreshEnabled
• ignoreSilentHardwareSwitch
• onFileDownload
• limitsNavigationsToAppBoundDomains
• textInteractionEnabled
• mediaCapturePermissionGrantType
• autoManageStatusBarEnabled
• setSupportMultipleWindows
• basicAuthCredential
• enableApplePay
• forceDarkOn
• useWebView2
• minimumFontSize
• downloadingMessage
• lackPermissionToDownloadMessage
• allowsProtectedMedia

메서드 색인

• goForward
• goBack
• reload
• stopLoading
• injectJavaScript
• clearFormData
• clearCache
• clearHistory
• requestFocus
• postMessage

참조

속성

source

WebView에서 정적 HTML 또는 URI(선택적 헤더 포함)을 로드합니다. 정적 HTML은 [originWhitelist](<https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#originwhitelist>) 를 ["*"]로 설정해야합니다.

source에 전달되는 객체는 다음 중 하나의 형태를 가질 수 있습니다.

URI 로드

• uri(문자열) - WebView에서 로드할 URI입니다. 로컬 또는 원격 파일이며 React 상태 또는 속성으로 변경하여 새 페이지로 이동할 수 있습니다.
• method(문자열) - 사용할 HTTP 방법입니다. 지정되지 않으면 기본값은 GET입니다. Android 및 Windows에서 지원되는 방법은 GET 및 POST입니다.
• headers(객체) - 요청과 함께 전송할 추가 HTTP 헤더입니다. Android에서는 GET 요청에서만 사용할 수 있습니다. 사용자 지정 헤더 설정에 대한 자세한 내용은 가이드를 참조하십시오.
• body(문자열) - 요청과 함께 전송할 HTTP 바디입니다. 이는 유효한 UTF-8 문자열이어야하며 추가 인코딩(URL-escaping 또는 base64 등)이 적용되지 않고 정확히 지정된대로 전송됩니다. Android 및 Windows에서는 POST 요청에서만 사용할 수 있습니다.

정적 HTML

_정적 HTML 사용 시 WebView 속성 originWhiteList 를 ['_']로 설정해야합니다. 비디오 임베드(예: Twitter 또는 Facebook 게시물과 같은)과 같은 일부 콘텐츠의 경우 비디오 재생을 위해 baseUrl을 설정해야합니다.*

• html(문자열) - WebView에 표시할 정적 HTML 페이지입니다.
• baseUrl(문자열) - HTML에서 상대적인 링크에 사용될 기본 URL입니다. 이것은 WebView에서 만들어진 CORS 요청의 원본 헤더에도 사용됩니다. 안드로이드 WebView 문서를 참조하십시오.

automaticallyAdjustContentInsets

WebView의 내용 인셋을 자동으로 조정할지 여부를 결정합니다.

automaticallyAdjustsScrollIndicatorInsets

내비게이션 바, 탭 바 또는 도구 모음 뒤에 위치한 웹 뷰의 스크롤 인디케이터 안쪽 여백을 조정할지 여부를 제어합니다. 기본값은 false입니다. (iOS 13+)

injectedJavaScript

문서 로드가 완료되기 전에 웹 페이지에 삽입될 JavaScript를 제공하도록 이를 설정합니다.

문자열이 유효한 유형 (예: true)으로 평가되고 예외를 throw하지 않도록하십시오.

iOS의 경우 [WKUserScriptInjectionTimeAtDocumentEnd]를 참조하십시오. 코드가 실행되지 않도록 하려면 빈 조치도 아니면 [onMessage] 핸들러를 설정하십시오.

자세한 내용은 JS 및 Native간 통신 가이드를 참조하십시오.

참고: Windows는 [native support for alerts]를 지원하지 않습니다. 즉, alert를 표시하는 스크립트는 작동하지 않습니다.

예:

window.location의 JSON 개체를 [onMessage] 핸들러에서 처리하도록 메시지 게시

const INJECTED_JAVASCRIPT = `(function() {
    window.ReactNativeWebView.postMessage(JSON.stringify(window.location));
})();`;
 
<WebView
  source={{ uri: "<https://reactnative.dev>" }}
  injectedJavaScript={INJECTED_JAVASCRIPT}
  onMessage={this.onMessage}
/>;

injectedJavaScriptBeforeContentLoaded

문서 요소가 만들어진 후 다른 하위 리소스 로드가 완료되기 전에 웹 페이지에 삽입될 JavaScript를 제공하도록 이를 설정합니다.

문자열이 유효한 유형 (예: true)으로 평가되고 예외를 throw하지 않도록하십시오.

iOS의 경우 [WKUserScriptInjectionTimeAtDocumentStart]를 참조하십시오.

경고 Android에서는 이 동작이 작동할 수 있지만 100% 신뢰할 수 없습니다 (참조 #1609 및 #1099).

자세한 내용은 JS 및 Native간 통신 가이드를 참조하십시오.

예:

window.location의 JSON 개체를 [onMessage] 핸들러에서 처리하도록 메시지 게시. 이 때 window.ReactNativeWebView.postMessage 는 사용 가능합니다.

const INJECTED_JAVASCRIPT = `(function() {
    window.ReactNativeWebView.postMessage(JSON.stringify(window.location));
})();`;
 
<WebView
  source={{ uri: "<https://reactnative.dev>" }}
  injectedJavaScriptBeforeContentLoaded={INJECTED_JAVASCRIPT}
  onMessage={this.onMessage}
/>;

injectedJavaScriptForMainFrameOnly

true (기본값; Android에서 필수)이면 injectedJavaScript 만 메인 프레임에 로드됩니다.

false (iOS 및 macOS에서만 지원)이면 모든 프레임 (예: iframe)에 로드됩니다.

injectedJavaScriptBeforeContentLoadedForMainFrameOnly

true (기본값; Android에서 필수)이면 injectedJavaScriptBeforeContentLoaded 만 메인 프레임에 로드됩니다.

false (iOS 및 macOS에서만 지원)이면 모든 프레임 (예: iframe)에 로드됩니다.

mediaPlaybackRequiresUserAction

HTML5 오디오 및 비디오가 재생되기 전에 사용자가 탭해야하는지 여부를 결정하는 부울입니다. 기본값은 true입니다. (Android API 최소 버전 17).

참고: 기본값 true는 iOS에서 일부 비디오가 로딩 중에 멈추는 문제를 발생시킬 수 있습니다. 이 문제를 해결하기 위해 false로 설정할 수 있습니다.

nativeConfig

WebView를 렌더링하는 데 사용되는 네이티브 구성 요소를 재정의합니다. 동일한 JavaScript를 사용하는 사용자 지정 네이티브 WebView를 활성화합니다.

nativeConfig prop은 다음 키를 가진 객체를 기대합니다.

• component (아무거나)
• props (객체)
• viewManager (객체)

onError

WebView 로드에 실패했을 때 호출되는 함수입니다.

예:

<WebView
  source={{ uri: "<https://reactnative.dev>" }}
  onError={(syntheticEvent) => {
    const { nativeEvent } = syntheticEvent;
    console.warn("WebView error: ", nativeEvent);
  }}
/>

onError에 전달된 함수는 다음 속성이 있는 nativeEvent를 래핑하는 SyntheticEvent와 함께 호출됩니다.

canGoBack;
canGoForward;
code;
description;
didFailProvisionalNavigation;
domain;
loading;
target;
title;
url;

참고: 도메인은 iOS에서만 사용됩니다.

syntheticEvent는 syntheticEvent.preventDefault()를 호출하여 기본 동작을 방지할 수 있습니다.

onLoad

WebView 로드가 완료되면 호출되는 함수입니다.

예:

<WebView
  source={{ uri: "<https://reactnative.dev>" }}
  onLoad={(syntheticEvent) => {
    const { nativeEvent } = syntheticEvent;
    this.url = nativeEvent.url;
  }}
/>

onLoad에 전달된 함수는 다음 속성이 있는 nativeEvent를 래핑하는 SyntheticEvent와 함께 호출됩니다.

canGoBack;
canGoForward;
loading;
target;
title;
url;

onLoadEnd

WebView 로드가 성공하거나 실패하면 호출되는 함수입니다.

예:

<WebView
  source={{ uri: "<https://reactnative.dev>" }}
  onLoadEnd={(syntheticEvent) => {
    // update component to be aware of loading status
    const { nativeEvent } = syntheticEvent;
    this.isLoading = nativeEvent.loading;
  }}
/>

onLoadEnd에 전달된 함수는 다음 속성이 있는 nativeEvent를 래핑하는 SyntheticEvent와 함께 호출됩니다.

canGoBack;
canGoForward;
loading;
target;
title;
url;

onLoadStart

WebView 로드가 시작되면 호출되는 함수입니다.

예:

<WebView
  source={{ uri: "<https://reactnative.dev/=>" }}
  onLoadStart={(syntheticEvent) => {
    // update component to be aware of loading status
    const { nativeEvent } = syntheticEvent;
    this.isLoading = nativeEvent.loading;
  }}
/>

onLoadStart에 전달된 함수는 다음 속성이 있는 nativeEvent를 래핑하는 SyntheticEvent와 함께 호출됩니다.

canGoBack;
canGoForward;
loading;
target;
title;
url;

onLoadProgress

WebView가 로드되는 동안 호출되는 함수입니다.

예:

<WebView
  source={{ uri: "<https://reactnative.dev>" }}
  onLoadProgress={({ nativeEvent }) => {
    this.loadingProgress = nativeEvent.progress;
  }}
/>

onLoadProgress에 전달된 함수는 다음 속성이 있는 nativeEvent를 래핑하는 SyntheticEvent와 함께 호출됩니다.

canGoBack;
canGoForward;
loading;
progress;
target;
title;
url;

onHttpError

WebView가 http 오류를 수신하면 호출되는 함수입니다.

참고: Android API 최소 레벨 23.

예:

<WebView
  source={{ uri: "<https://reactnative.dev>" }}
  onHttpError={(syntheticEvent) => {
    const { nativeEvent } = syntheticEvent;
    console.warn(
      "WebView received error status code: ",
      nativeEvent.statusCode
    );
  }}
/>

onHttpError에 전달된 함수는 다음 속성이 있는 nativeEvent를 래핑하는 SyntheticEvent와 함께 호출됩니다.

canGoBack;
canGoForward;
description;
loading;
statusCode;
target;
title;
url;

참고: 설명은 Android에서만 사용됩니다.

onRenderProcessGone

WebView 프로세스가 Android에서 OS에 의해 크래시 또는 종료될 때 호출되는 함수입니다.

참고: Android API 최소 레벨 26. Android 전용

예:

<WebView
  source={{ uri: "<https://reactnative.dev>" }}
  onRenderProcessGone={(syntheticEvent) => {
    const { nativeEvent } = syntheticEvent;
    console.warn("WebView Crashed: ", nativeEvent.didCrash);
  }}
/>

onRenderProcessGone에 전달된 함수는 다음 속성이 있는 nativeEvent를 래핑하는 SyntheticEvent와 함께 호출됩니다.

didCrash;

onMessage

WebView가 window.ReactNativeWebView.postMessage를 호출할 때 호출되는 함수입니다. 이 속성을 설정하면 이 글로벌이 WebView에 삽입됩니다.

window.ReactNativeWebView.postMessage 은 data 하나의 인수를 허용하며, 이는 이벤트 개체, event.nativeEvent.data에서 사용할 수 있습니다. data는 문자열이어야합니다.

자세한 내용은 JS 및 Native간 통신 가이드를 참조하십시오.

onNavigationStateChange

WebView 로딩이 시작되거나 종료될 때 호출되는 함수입니다.

예제:

<WebView
  source={{ uri: "<https://reactnative.dev>" }}
  onNavigationStateChange={(navState) => {
    // Keep track of going back navigation within component
    this.canGoBack = navState.canGoBack;
  }}
/>

navState 객체에는 다음 속성이 포함됩니다.

canGoBack
canGoForward
loading
navigationType (iOS only)
target
title
url
 

onContentProcessDidTerminate⬆

WebView 콘텐츠 프로세스가 종료될 때 호출되는 함수입니다.

iOS Web View는 웹 콘텐츠를 렌더링하고 관리하기 위해 별도의 프로세스를 사용합니다. WebKit은 지정된 웹 뷰의 프로세스가 충돌하는 경우가 아니더라도이 방법을 호출합니다. 예를 들어, iOS WebViews는 앱의 총 RAM에 포함되지 않으므로 사용자가 열고있는 새 앱의 메모리를 해제하기 위해 앱과는 독립적으로 종료 될 수 있습니다. 백그라운드에서 일정 시간이 지나면 웹뷰가 종료되는 것은 예상되는 것입니다.

예제:

<WebView
  source={{ uri: "<https://reactnative.dev>" }}
  onContentProcessDidTerminate={(syntheticEvent) => {
    const { nativeEvent } = syntheticEvent;
    console.warn("Content process terminated, reloading", nativeEvent);
    this.refs.webview.reload();
  }}
/>

onContentProcessDidTerminate에 전달 된 함수는 다음 속성이있는 nativeEvent를 래핑하는 SyntheticEvent와 함께 호출됩니다.

canGoBack;
canGoForward;
loading;
target;
title;
url;

onScroll⬆

WebView에서 스크롤 이벤트가 발생 할 때 호출되는 함수입니다.

예제:

<Webview
  source={{ uri: "<https://reactnative.dev>" }}
  onScroll={(syntheticEvent) => {
    const { contentOffset } = syntheticEvent.nativeEvent;
    console.table(contentOffset);
  }}
/>

onScroll에 전달 된 함수는 다음 속성이있는 nativeEvent를 래핑하는 SyntheticEvent와 함께 호출됩니다.

contentInset;
contentOffset;
contentSize;
layoutMeasurement;
velocity;
zoomScale;

originWhitelist⬆

탐색 할 수있는 원래 문자열 목록입니다. 문자열은 와일드 카드를 허용하며 전체 URL이 아닌 만 원래와 일치합니다. 사용자가 새 페이지로 이동하려고하지만 새 페이지가이 목록에 없는 경우 URL은 OS에서 처리됩니다. 기본 허용 된 원본은 "http://" 및 "https://"입니다.

예제:

//only allow URIs that begin with https:// or git://
<WebView
  source={{ uri: "<https://reactnative.dev>" }}
  originWhitelist={["https://*", "git://*"]}
/>

renderError⬆

오류가있을 경우 표시 할보기를 반환하는 함수입니다.

예제:

<WebView
  source={{ uri: "<https://reactnative.dev>" }}
  renderError={(errorName) => <Error name={errorName} />}
/>

renderError에 전달 된 함수는 오류의 이름으로 호출됩니다.

renderLoading⬆

로딩 표시기를 반환하는 함수입니다. startInLoadingState 프로퍼티는 이 프로퍼티를 사용하려면 true로 설정해야합니다.

예제:

<WebView
  source={{ uri: "<https://reactnative.dev>" }}
  startInLoadingState={true}
  renderLoading={() => <Loading />}
/>

scalesPageToFit⬆

웹 콘텐츠를보기에 맞게 확대 / 축소하고 사용자가 크기를 조정할 수 있도록하는 불리언입니다. 기본값은 true입니다.

onShouldStartLoadWithRequest⬆

웹 뷰 요청을 사용자 정의 처리하는 함수입니다. 함수에서 true를 반환하면 요청을 계속로드하고 false를 반환하면로드를 중지합니다.

Android에서는 첫 번째 로드에서 호출되지 않습니다.

예제:

<WebView
  source={{ uri: "<https://reactnative.dev>" }}
  onShouldStartLoadWithRequest={(request) => {
    // Only allow navigating within this website
    return request.url.startsWith("<https://reactnative.dev>");
  }}
/>

request 객체에는 다음 속성이 포함됩니다.

title
url
loading
target
canGoBack
canGoForward
lockIdentifier
mainDocumentURL (iOS only)
navigationType (iOS only)
isTopFrame (iOS only)
 

startInLoadingState⬆

첫 번째 로드에서 WebView에서 로딩보기를 표시하도록 강제하는 부울 값입니다.이 프로퍼티를 true로 설정해야renderLoading프로퍼티가 작동합니다.

style⬆

WebView 스타일을 사용자 정의 할 수있는 스타일 객체입니다. 기본 스타일이 있습니다 (예 :height속성을 사용하려면 스타일에flex : 0을 추가해야합니다).

예제:

<WebView
  source={{ uri: "<https://reactnative.dev>" }}
  style={{ marginTop: 20 }}
/>

containerStyle⬆

WebView 컨테이너 스타일을 사용자 정의 할 수있는 스타일 객체입니다. 기본 스타일이 있습니다 (예 :height속성을 사용하려면 스타일에flex : 0을 추가해야합니다).

예제:

<WebView
  source={{ uri: "<https://reactnative.dev>" }}
  containerStyle={{ marginTop: 20 }}
/>

decelerationRate⬆

사용자가 손가락을 뗀 후 스크롤 뷰가 얼마나 빨리 감속되는지 결정하는 부동 소수점 숫자입니다. 문자열 단축키 "normal"및 "fast"도 사용할 수 있습니다. 이는 각각 UIScrollViewDecelerationRateNormal 및 UIScrollViewDecelerationRateFast에 해당하는 iOS 하위 설정과 일치합니다.

• 일반 : 0.998
• 빠른 : iOS 웹보기의 기본값 인 0.99

domStorageEnabled⬆

DOM Storage를 사용할 수 있도록하는 부울 값입니다. Android에서만 사용됩니다.

javaScriptEnabled⬆

WebView에서 JavaScript를 활성화하는 부울 값입니다. 기본값은 true입니다.

javaScriptCanOpenWindowsAutomatically⬆

JavaScript가 사용자 상호 작용없이 창을 열 수 있는지 여부를 나타내는 부울 값입니다. 기본값은 false입니다.

androidLayerType⬆

계층 유형을 지정합니다.

androidLayerType에 대한 가능한 값은 다음과 같습니다.

• none (기본값) - 보기에 레이어가 없습니다.
• software - 뷰에 소프트웨어 레이어가 있습니다. 소프트웨어 레이어는 비트맵으로 지원되며 하드웨어 가속이 활성화되어 있더라도 Android의 소프트웨어 렌더링 파이프 라인을 사용하여 뷰를 렌더링합니다.
• hardware - 뷰에 하드웨어 레이어가 있습니다. 하드웨어 레이어는 하드웨어별 텍스처로 지원되며 하드웨어 가속이보기 계층 구조에 대해 활성화되어 있는 경우 Android의 하드웨어 렌더링 파이프 라인을 사용하여 뷰를 렌더링합니다.

mixedContentMode⬆

혼합 콘텐츠 모드를 지정합니다. 즉, WebView는 안전한 출처에서 다른 출처의 콘텐츠를 로드할 수 있습니다.

mixedContentMode의 가능한 값은 다음과 같습니다.

• never (기본값) - WebView는 안전한 출처에서 불안전한 출처의 콘텐츠를 로드할 수 없습니다.
• always - WebView는 안전한 출처가 아니더라도 안전한 출처에서 콘텐츠를 로드할 수 있습니다.
• compatibility - WebView는 혼합 콘텐츠에 대한 현대적인 웹 브라우저 접근 방식과 호환되도록 시도합니다.

thirdPartyCookiesEnabled⬆

WebView에서 타사 쿠키를 사용하도록 하는 부울 값입니다. 이 기능은 안드로이드 롤리팝 이상에서만 사용할 수 있으며, 킷캣 이하 버전에서는 기본적으로 타사 쿠키가 활성화됩니다. 기본값은 true입니다. 쿠키에 대한 자세한 내용은 가이드를 참조하십시오.

userAgent⬆

WebView의 사용자 에이전트를 설정합니다.

applicationNameForUserAgent⬆

기존 사용자 에이전트에 추가합니다. userAgent를 설정하면 재정의됩니다.

<WebView
  source={{ uri: "<https://reactnative.dev>" }}
  applicationNameForUserAgent={"DemoApp/1.1.0"}
/>
// 결과적으로 User-Agent는 다음과 같이 보일 것입니다.
// Mozilla/5.0 (Linux; Android 8.1.0; Android SDK built for x86 Build/OSM1.180201.021; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/61.0.3163.98 Mobile Safari/537.36 DemoApp/1.1.0
// Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 DemoApp/1.1.0

allowsFullscreenVideo⬆

비디오를 전체 화면으로 재생할 수 있는지 여부를 지정하는 부울입니다. 기본값은 false입니다.

allowsInlineMediaPlayback⬆

HTML5 비디오가 인라인으로 재생되는지 또는 네이티브 전체 화면 컨트롤러를 사용하는지를 결정하는 부울입니다. 기본값은 false입니다.

참고

비디오를 인라인으로 재생하려면 이 속성을 true로 설정해야 합니다. 그러나 HTML 문서의 비디오 요소에 webkit-playsinline 속성이 포함되어 있어야 합니다.

allowsAirPlayForMediaPlayback⬆

AirPlay가 허용되는지 여부를 나타내는 부울 값입니다. 기본값은 false입니다.

bounces⬆

콘텐츠 가장자리에 도달하면 WebView가 튕기는지 여부를 결정하는 부울 값입니다. 기본값은 true입니다.

overScrollMode⬆

오버 스크롤 모드를 지정합니다.

overScrollMode의 가능한 값은 다음과 같습니다.

• always (기본값) - 사용자가 스크롤할 수 있는 뷰라면 항상 오버 스크롤을 허용합니다.
• content - 사용자가 스크롤할 수 있는 콘텐츠가 충분히 큰 경우에만 오버스크롤링을 허용합니다.
• never - 사용자가 이 뷰에서 오버 스크롤할 수 없습니다.

contentInset⬆

스크롤 뷰의 가장자리에서 WebView 콘텐츠가 얼마나 들어갈지 결정하는 객체입니다. 기본값은 {top: 0, left: 0, bottom: 0, right: 0}입니다.

| 유형                                                             | 필수   | 플랫폼 |
| ---------------------------------------------------------------- | ------ | ------ |
| 객체: {top: number, left: number, bottom: number, right: number} | 아니오 | iOS    |

contentInsetAdjustmentBehavior⬆

이 속성은 안전 영역 삽입이 스크롤 보기의 콘텐츠 영역을 수정하는 방식을 지정합니다. 이 속성의 기본값은 "never"입니다. iOS 11 이상에서 사용할 수 있습니다. 기본값은 never입니다.

가능한 값:

• automatic
• scrollableAxes
• never
• always

contentMode⬆

로드할 콘텐츠의 유형을 제어합니다. iOS 13 이상에서 사용할 수 있습니다. 기본값은 recommended입니다. iPhone 및 iPad Mini에 모바일 콘텐츠를 로드하고 더 큰 iPad에는 데스크톱 콘텐츠를 로드합니다.

자세한 내용은 iPad에서 데스크톱급 브라우징 소개를 참조하십시오.

가능한 값:

• recommended
• mobile
• desktop

dataDetectorTypes⬆

WebView 콘텐츠에서 클릭 가능한 URL로 변환할 데이터 유형을 결정합니다. 기본적으로 전화번호만 감지됩니다.

하나의 유형 또는 여러 유형의 배열을 제공할 수 있습니다.

dataDetectorTypes의 가능한 값은 다음과 같습니다.

• phoneNumber
• link
• address
• calendarEvent
• none
• all
• trackingNumber
• flightNumber
• lookupSuggestion

scrollEnabled⬆

WebView에서 스크롤이 활성화되는지 여부를 결정하는 부울 값입니다. 기본값은 true입니다. 이 값을 false로 설정하면 WebView이 입력 필드 위에 키보드가 표시될 때 문서 본문을 이동하지 않습니다.

nestedScrollEnabled⬆

Android의 ScrollView 내에서 사용될 때 WebView에서 스크롤이 가능한지 여부를 결정하는 부울 값입니다. 기본값은 false입니다.

이 값을 true로 설정하면 WebView에서 스크롤할 때 ScrollView가 스크롤하지 않습니다.

setBuiltInZoomControls⬆

WebView가 내장된 줌 메커니즘을 사용해야 하는지 여부를 설정합니다. 기본값은 true입니다. 이 값을 false로 설정하면 확대/축소를 제어하는 핀치 제스처를 사용할 수 없습니다.

setDisplayZoomControls⬆

내장 줌 메커니즘(참조 setBuiltInZoomControls)을 사용할 때 WebView가 화면에 줌 컨트롤을 표시해야 하는지 여부를 설정합니다. 기본값은 false입니다.

directionalLockEnabled⬆

특정 방향으로 스크롤이 비활성화되는지 여부를 결정하는 부울 값입니다. 기본값은 true입니다.

showsHorizontalScrollIndicator⬆

WebView에서 수평 스크롤 표시기를 표시해야 하는지 여부를 결정하는 부울 값입니다. 기본값은 true입니다.

showsVerticalScrollIndicator⬆

WebView에서 수직 스크롤 표시기를 표시해야 하는지 여부를 결정하는 부울 값입니다. 기본값은 true입니다.

geolocationEnabled⬆

WebView에서 Geolocation이 활성화되어 있는지 여부를 설정합니다. 기본값은 false입니다. Android에서만 사용됩니다.

allowFileAccessFromFileURLs⬆

파일 체계 URL의 컨텍스트에서 실행되는 JavaScript가 다른 파일 체계 URL에서 콘텐츠에 액세스할 수 있는지 여부를 설정하는 부울입니다. 기본값은 false입니다.

allowUniversalAccessFromFileURLs⬆

파일 체계 URL의 컨텍스트에서 실행되는 JavaScript가 어떤 원본에서도 콘텐츠에 액세스할 수 있는지 여부를 설정하는 부울입니다. 다른 파일 체계 URL에서 콘텐츠에 액세스하는 것도 포함됩니다. 기본값은 false입니다.

allowingReadAccessToURL⬆

WebView의 파일이 스크립트, AJAX 요청 및 CSS 가져오기에서 참조할 수 있는 URL을 나타내는 문자열 값입니다. 이것은 'file: //' URL로 설정된 source.uri를로드하는 WebView에 대해서만 사용됩니다. 제공되지 않으면 기본값은 source.uri에서 제공된 URL에 대한 읽기 액세스만 허용하는 것입니다.

keyboardDisplayRequiresUserAction⬆

false인 경우 웹 콘텐츠가 프로그래밍 방식으로 키보드를 표시할 수 있습니다. 기본값은 true입니다.

hideKeyboardAccessoryView⬆

true인 경우 키보드 액세서리 뷰 (< > 및 Done)가 숨겨집니다.

allowsBackForwardNavigationGestures⬆

true인 경우 가로 스와이프 제스처를 사용할 수 있습니다. 기본값은 false입니다.

incognito⬆

WebView의 수명 동안 어떤 데이터도 저장하지 않습니다.

allowFileAccess⬆

true인 경우 file://' URI를 통해 파일 시스템에 액세스할 수 있습니다. 기본값은 false입니다.

saveFormDataDisabled⬆

WebView가 양식 데이터 저장을 비활성화해야 하는지 여부를 설정합니다. 기본값은 false입니다. 이 기능은 Android API 레벨 26 이상에서는 영향을 미치지 않습니다. 자동 채우기 기능이 양식 데이터를 저장하기 때문입니다.

cacheEnabled⬆

WebView가 브라우저 캐싱을 사용해야 하는지 여부를 설정합니다.

cacheMode⬆

캐시 사용 방법을 재정의합니다. 캐시 사용 방법은 탐색 유형에 따라 결정됩니다. 일반 페이지 로드의 경우 캐시가 확인되고 필요에 따라 콘텐츠가 다시 유효성이 검증됩니다. 뒤로 탐색할 때 콘텐츠가 다시 유효성 검사되지 않으며 대신 캐시에서 콘텐츠만 검색됩니다. 이 속성을 사용하면 클라이언트가이 동작을 무시할 수 있습니다.

가능한 값은 다음과 같습니다.

• LOAD_DEFAULT - 기본 캐시 사용 모드입니다. 탐색 유형이 특정 동작을 요구하지 않으면 사용 가능하고 만료되지 않은 경우 캐시된 리소스를 사용하고 그렇지 않으면 네트워크에서 리소스를로드합니다.
• LOAD_CACHE_ELSE_NETWORK - 만료된 경우라도 사용 가능한 경우 캐시된 리소스를 사용하고 그렇지 않으면 네트워크에서 리소스를로드합니다.
• LOAD_NO_CACHE - 캐시를 사용하지 않고 네트워크에서로드합니다.
• LOAD_CACHE_ONLY - 네트워크를 사용하지 않고 캐시에서 로드합니다.

pagingEnabled⬆

이 속성이 true인 경우 스크롤 뷰는 사용자가 스크롤 할 때 스크롤 뷰의 경계의 배수에서 중지됩니다. 기본값은 false입니다.

allowsLinkPreview⬆

링크를 누르면 목적지에 대한 미리보기가 표시되는지 여부를 결정하는 부울 값입니다. iOS에서는 3D Touch를 지원하는 기기에서 이 속성을 사용할 수 있습니다. iOS 10 이후에는 기본값이 true이며, 그 이전에는 기본값이 false입니다.

sharedCookiesEnabled⬆

WebView에서 [NSHTTPCookieStorage sharedHTTPCookieStorage]의 공유 쿠키를 모든 로드 요청에서 사용해야 하는지 여부를 설정합니다. 기본값은 false입니다. 쿠키에 대한 자세한 내용은 가이드를 참조하십시오.

textZoom⬆

사용자가 Android 시스템에서 사용자 정의 글꼴 크기를 설정한 경우 WebView에서 사이트 인터페이스의 불필요한 스케일을 제거합니다.

표준 textZoom (100) 매개변수 크기를 설정하면이 불필요한 효과가 사라집니다.

예:

<WebView textZoom={100} />

pullToRefreshEnabled⬆

WebView에서 pull to refresh gesture를 사용할지 여부를 결정하는 부울 값입니다. 기본값은 false입니다. true로 설정하면 bounces가 자동으로 true로 설정됩니다.

ignoreSilentHardwareSwitch⬆

(only on ios)

true로 설정하면 하드웨어 silent 스위치를 무시합니다. 기본값: false

onFileDownload⬆

이 속성은 iOS 전용입니다.

클라이언트가 파일을 다운로드해야 할 때 호출되는 함수입니다.

iOS 13 이상: 웹뷰가 'attachment...'이라는 Content-Disposition 헤더로 끝나는 HTTP 응답 URL로 이동하면 이 함수가 호출됩니다.

iOS 8 이상: MIME 유형이 웹뷰에서 렌더링할 수 없는 것을 나타내면 이 함수가 호출됩니다. 13 이전의 iOS 버전에서는 이것이 이 함수가 호출되는 유일한 조건입니다.

애플리케이션은 실제 파일을 다운로드하기 위한 자체 코드를 제공해야 합니다.

제공되지 않으면 기본값은 웹뷰가 파일을 렌더링하도록 하는 것입니다.

예시:

<WebView
  source={{ uri: "<https://reactnative.dev>" }}
  onFileDownload={({ nativeEvent: { downloadUrl } }) => {
    // downloadUrl 문자열을 사용하여 파일을 다운로드하는 방법을 원하는 대로 사용하십시오.
  }}
/>

limitsNavigationsToAppBoundDomains⬆

true이면 WKWebView가 app-bound 도메인으로만 탐색한다는 것을 WebKit에 지정합니다. iOS 14 이상에서만 사용 가능합니다.

설정하면 app-bound 도메인에서 벗어나려는 모든 시도는 "App-bound domain failure" 오류로 실패합니다. 응용 프로그램은 새로운 Info.plist 키 WKAppBoundDomains를 사용하여 최대 10개의 "app-bound" 도메인을 지정할 수 있습니다. 자세한 정보는 App-Bound Domains를 참조하십시오.

예시:

<WebView limitsNavigationsToAppBoundDomains={true} />

textInteractionEnabled⬆

false이면 WKWebView가 텍스트와 상호작용하지 않도록 지정합니다. iOS 14.5 이상에서만 사용 가능합니다.

기본값은 true입니다.

예시:

<WebView textInteractionEnabled={false} />

mediaCapturePermissionGrantType

미디어 캡처 권한 요청을 처리하는 방법을 지정합니다. 기본값은 'prompt'이며 사용 가능한 플랫폼은 iOS 15 이상입니다.

가능한 값:

• grantIfSameHostElsePrompt : 권한 요청의 보안 원본 호스트가 WebView의 현재 URL의 호스트와 같으면 권한이 이전에 부여되었으면 권한이 부여됩니다. 그렇지 않으면 사용자에게 프롬프트가 표시됩니다.
• grantIfSameHostElseDeny : 권한 요청의 보안 원본 호스트가 WebView의 현재 URL의 호스트와 같으면 권한이 이전에 부여되었으면 권한이 부여됩니다. 그렇지 않으면 거부됩니다.
• deny
• grant : 권한이 이전에 부여되었으면 권한이 부여됩니다.
• prompt

권한이 이미 부여된 경우에도 권한 부여가 프롬프트로 표시될 수 있습니다.

예시:

<WebView mediaCapturePermissionGrantType={"grantIfSameHostElsePrompt"} />

autoManageStatusBarEnabled

true로 설정하면 상태 표시줄이 WebView에 의해 자동으로 숨겨지거나 표시됩니다. false이면 WebView이 상태 표시줄을 전혀 관리하지 않습니다. 기본값은 true입니다.

예시:

<WebView autoManageStatusBarEnabled={false} />

setSupportMultipleWindows

WebView가 여러 창을 지원하는지 여부를 지정합니다. 자세한 정보는 Android 문서를 참조하십시오. 이 값을 false로 설정하면 악성 iframe이 상위 레이어 DOM으로 이탈할 수 있는 이 취약점에 노출될 수 있습니다.

예시:

<WebView setSupportMultipleWindows={false} />

enableApplePay

true로 설정하면 WebView가 Apple Pay 지원으로 렌더링됩니다. 설정하면 웹 사이트가 React Native Webview에서 Apple Pay를 호출할 수 있습니다. injectJavaScript, html5 History, sharedCookiesEnabled, injectedJavaScript, injectedJavaScriptBeforeContentLoaded 등의 기능은 작동하지 않습니다. Apple Pay Release Note을 참조하십시오.

앱에 메시지를 보내야 하는 경우, 웹 페이지는 명시적으로 webkit message handler를 호출하고 react native 쪽의 onMessage 핸들러에서 이를 수신해야 합니다.

window.webkit.messageHandlers.ReactNativeWebView.postMessage("hello apple pay");

예시:

<WebView enableApplePay={true} />

forceDarkOn

다크 테마 구성

_참고:_ force dark 설정은 지속적이지 않습니다. 앱 프로세스가 시작될 때마다 정적 메소드를 호출해야 합니다.

_참고:_ 밤<->낮 모드 전환은 구성 변경이므로 기본적으로 활동이 다시 시작되고 새 값으로 테마를 적용합니다. 이 기본 동작을 재정의하는 경우 이 메서드가 여전히 변경이 생길 때마다 호출되도록해야 합니다.

예시:

<WebView forceDarkOn={false} />

menuItems

선택한 텍스트 다음에 나타나는 UIMenu에 추가될 사용자 정의 메뉴 항목 객체 배열입니다. onCustomMenuSelection과 함께 사용됩니다.

예시:

<WebView
  menuItems={[
    { label: "Tweet", key: "tweet" },
    { label: "Save for later", key: "saveForLater" },
  ]}
/>

onCustomMenuSelection

사용자 정의 메뉴 항목이 선택되었을 때 호출되는 함수입니다. Native 이벤트를 수신합니다. 이벤트에는 label, key, selectedText 세 가지 사용자 지정 키가 포함됩니다.

<WebView
  menuItems={[
    { label: "Tweet", key: "tweet" },
    { label: "Save for later", key: "saveForLater" },
  ]}
  onCustomMenuSelection={(webViewEvent) => {
    const { label } = webViewEvent.nativeEvent; // 메뉴 항목의 이름, 즉 'Tweet'
    const { key } = webViewEvent.nativeEvent; // 메뉴 항목의 키, 즉 'tweet'
    const { selectedText } = webViewEvent.nativeEvent; // 선택한 텍스트
  }}
/>

basicAuthCredential

기본 인증에 사용할 사용자 자격 증명을 지정하는 객체입니다.

• username(문자열) - 기본 인증에 사용되는 사용자 이름입니다.
• password(문자열) - 기본 인증에 사용되는 암호입니다.

useWebView2

네이티브 웹뷰로 WebView 대신 WinUI WebView2 컨트롤을 사용할지 여부를 지정합니다. WebView2 컨트롤은 Microsoft Edge(Chromium) 렌더링 엔진을 사용하여 웹 콘텐츠를 렌더링하는 WinUI 컨트롤입니다. 옵션은 런타임에서 토글할 수 있으며 Fast Refresh를 지원합니다.

예시:

<WebView useWebView2={true} />

minimumFontSize

Android는이 값을 기반으로 최소 글꼴 크기를 강제합니다. 1에서 72 사이의 음수가 아닌 정수. 지정된 범위 외의 숫자는 고정됩니다. 기본값은 8입니다. 더 작은 글꼴 크기를 사용하고 전체 창을 한 화면에 맞추는 데 문제가 있는 경우 이 값을 더 작은 값으로 설정해 보십시오.

<WebView minimumFontSize={1} />

예시:

downloadingMessage

WebView를 통해 파일을 다운로드할 때 Toast에 표시되는 메시지입니다. 기본 메시지는 "다운로드 중"입니다.

lackPermissionToDownloadMessage

웹뷰가 파일을 다운로드할 수 없을 때 Toast에 표시되는 메시지입니다. 기본 메시지는 "접근 권한이 거부되어 파일을 다운로드할 수 없습니다. 파일을 다운로드하려면 저장소에 쓰기 권한을 부여해주세요."입니다.

allowsProtectedMedia

WebView가 DRM으로 보호된 미디어를 재생할 수 있는지 여부입니다. 기본값은 false입니다. /! \이 값을 false로 설정하면 현재 웹 페이지에 이미 부여된 권한을 취소하지 않습니다. 이것을 수행하려면 페이지를 다시로드해야합니다. /! \

메소드

goForward()⬆

goForward();

웹 뷰의 히스토리에서 한 페이지를 앞으로 이동합니다.

goBack()⬆

goBack();

웹 뷰의 히스토리에서 한 페이지를 뒤로 이동합니다.

reload()⬆

reload();

현재 페이지를 다시 로드합니다.

stopLoading()⬆

stopLoading();

현재 페이지 로딩을 중지합니다.

injectJavaScript(str)⬆

injectJavaScript("... javascript string ...");

JavaScript 문자열을 실행합니다.

자세한 내용은 JS 및 Native 간의 통신 가이드를 참조하세요.

requestFocus()⬆

requestFocus();

WebView에 포커스 요청을 보냅니다. (TV 앱을 만드는 사람들은 이 기능을 확인해보세요!)

postMessage(str)⬆

postMessage("message");

WebView에 메시지를 게시합니다. [onMessage](<https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#onmessage>)에서 처리됩니다.

clearFormData()⬆

(Android 전용)

clearFormData();

현재 포커스 된 양식 필드에서 자동 완성 팝업을 제거합니다. developer.android.com reference

clearCache(bool)⬆

(Android 전용)

clearCache(true);

리소스 캐시를 지웁니다. 캐시는 응용 프로그램 당입니다. 따라서이 작업은 사용하는 모든 WebViews의 캐시를 지웁니다. developer.android.com reference

clearHistory()⬆

(Android 전용)

clearHistory();

내부 백 / 포워드 목록을 지우도록이 WebView에 지시합니다. developer.android.com reference

기타 문서

시작 가이드 및 심층 가이드도 확인하세요.

번역

이 파일은 다음 위치에서 사용할 수 있습니다.

• 브라질 포르투갈어