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+)

유형필수플랫폼
bool아니오iOS(13+)

injectedJavaScript

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

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

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

유형필수플랫폼
string아니오iOS, Android, macOS, Windows

자세한 내용은 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).

유형필수플랫폼
string아니오iOS, macOS, Android (실험적)

자세한 내용은 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)에 로드됩니다.

유형필수플랫폼
bool아니오iOS 및 macOS (Android에서는 true 만 지원)

injectedJavaScriptBeforeContentLoadedForMainFrameOnly

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

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

유형필수플랫폼
bool아니오iOS 및 macOS (Android에서는 true 만 지원)

mediaPlaybackRequiresUserAction

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

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

유형필수플랫폼
bool아니오iOS, Android, macOS

nativeConfig

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

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

  • component (아무거나)
  • props (객체)
  • viewManager (객체)
유형필수플랫폼
object아니오iOS, Android, macOS

onError

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

유형필수
function아니오

예:

<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 로드가 완료되면 호출되는 함수입니다.

유형필수
function아니오

예:

<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 로드가 성공하거나 실패하면 호출되는 함수입니다.

유형필수
function아니오

예:

<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 로드가 시작되면 호출되는 함수입니다.

유형필수
function아니오

예:

<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가 로드되는 동안 호출되는 함수입니다.

유형필수플랫폼
function아니오iOS, Android, macOS

예:

<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.

유형필수
function아니오

예:

<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 전용

유형필수
function아니오

예:

<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는 문자열이어야합니다.

유형필수
function아니오

자세한 내용은 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 및 macOS WKWebView

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에서 스크롤 이벤트가 발생 할 때 호출되는 함수입니다.

유형필수플랫폼
함수아니오iOS, macOS, Android, Windows

예제:

<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://"입니다.

유형필수플랫폼
문자열의 배열아니오iOS, Android, macOS

예제:

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

renderError

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

유형필수플랫폼
함수아니오iOS, Android, macOS

예제:

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

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


renderLoading

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

유형필수플랫폼
함수아니오iOS, Android, macOS

예제:

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

scalesPageToFit

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

유형필수플랫폼
부울아니오Android

onShouldStartLoadWithRequest

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

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

유형필수플랫폼
함수아니오iOS, Android, macOS

예제:

<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프로퍼티가 작동합니다.

유형필수플랫폼
부울아니오iOS, Android, macOS

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
유형필수플랫폼
숫자아니오iOS

domStorageEnabled

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

유형필수플랫폼
부울아니오Android

javaScriptEnabled

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

유형필수
부울아니오

javaScriptCanOpenWindowsAutomatically

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

유형필수
부울아니오

androidLayerType

계층 유형을 지정합니다.

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

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

mixedContentMode

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

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

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

thirdPartyCookiesEnabled

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

유형필수플랫폼
부울아니오안드로이드

userAgent

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

유형필수플랫폼
문자열아니오iOS, 안드로이드, macOS

applicationNameForUserAgent

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

유형필수플랫폼
문자열아니오iOS, 안드로이드, macOS
<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 속성이 포함되어 있어야 합니다.

유형필수플랫폼
부울아니오iOS

allowsAirPlayForMediaPlayback

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

유형필수플랫폼
부울아니오iOS 및 macOS

bounces

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

유형필수플랫폼
부울아니오iOS

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
유형필수플랫폼
문자열아니오iOS

contentMode

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

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

가능한 값:

  • recommended
  • mobile
  • desktop
유형필수플랫폼
문자열아니오iOS

dataDetectorTypes

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

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

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

  • phoneNumber
  • link
  • address
  • calendarEvent
  • none
  • all
  • trackingNumber
  • flightNumber
  • lookupSuggestion
유형필수플랫폼
문자열 또는 배열아니오iOS

scrollEnabled

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

유형필수플랫폼
부울아니오iOS 및 macOS

nestedScrollEnabled

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

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

유형필수플랫폼
부울아니오안드로이드

setBuiltInZoomControls

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

유형필수플랫폼
부울아니오안드로이드

setDisplayZoomControls

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

타입필수 여부플랫폼
bool아니오Android

directionalLockEnabled

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

타입필수 여부플랫폼
bool아니오iOS

showsHorizontalScrollIndicator

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

타입필수 여부플랫폼
bool아니오iOS, Android, macOS

showsVerticalScrollIndicator

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

타입필수 여부플랫폼
bool아니오iOS, Android, macOS

geolocationEnabled

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

타입필수 여부플랫폼
bool아니오Android

allowFileAccessFromFileURLs

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

타입필수 여부플랫폼
bool아니오iOS, Android, macOS

allowUniversalAccessFromFileURLs

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

타입필수 여부플랫폼
bool아니오iOS, Android, macOS

allowingReadAccessToURL

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

타입필수 여부플랫폼
문자열아니오iOS 및 macOS

keyboardDisplayRequiresUserAction

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

타입필수 여부플랫폼
boolean아니오iOS

hideKeyboardAccessoryView

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

타입필수 여부플랫폼
boolean아니오iOS

allowsBackForwardNavigationGestures

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

타입필수 여부플랫폼
boolean아니오iOS 및 macOS

incognito

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

타입필수 여부플랫폼
boolean아니오iOS, Android, macOS

allowFileAccess

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

타입필수 여부플랫폼
boolean아니오Android

saveFormDataDisabled

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

타입필수 여부플랫폼
boolean아니오Android

cacheEnabled

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

타입필수 여부기본값플랫폼
boolean아니오trueiOS, Android, macOS

cacheMode

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

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

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

pagingEnabled

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

타입필수 여부플랫폼
boolean아니오iOS

allowsLinkPreview

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

타입필수 여부플랫폼
boolean아니오iOS 및 macOS

sharedCookiesEnabled

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

타입필수 여부플랫폼
boolean아니오iOS 및 macOS

textZoom

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

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

타입필수 여부플랫폼
number아니오Android

예:

<WebView textZoom={100} />


pullToRefreshEnabled

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

타입필수 여부플랫폼
부울아니오iOS

ignoreSilentHardwareSwitch

(only on ios)

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

타입필수 여부플랫폼
부울아니오iOS

onFileDownload

이 속성은 iOS 전용입니다.

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

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

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

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

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

예시:

<WebView
  source={{ uri: "<https://reactnative.dev>" }}
  onFileDownload={({ nativeEvent: { downloadUrl } }) => {
    // downloadUrl 문자열을 사용하여 파일을 다운로드하는 방법을 원하는 대로 사용하십시오.
  }}
/>
타입필수 여부플랫폼
함수아니오iOS

limitsNavigationsToAppBoundDomains

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

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

타입필수 여부플랫폼
부울아니오iOS

예시:

<WebView limitsNavigationsToAppBoundDomains={true} />

textInteractionEnabled

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

기본값은 true입니다.

타입필수 여부플랫폼
부울아니오iOS

예시:

<WebView textInteractionEnabled={false} />

mediaCapturePermissionGrantType

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

가능한 값:

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

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

타입필수 여부플랫폼
문자열아니오iOS

예시:

<WebView mediaCapturePermissionGrantType={"grantIfSameHostElsePrompt"} />

autoManageStatusBarEnabled

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

타입필수 여부플랫폼
부울아니오iOS

예시:

<WebView autoManageStatusBarEnabled={false} />

setSupportMultipleWindows

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

타입필수 여부기본값플랫폼
부울아니오trueAndroid

예시:

<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");
타입필수 여부기본값플랫폼
부울아니오falseiOS

예시:

<WebView enableApplePay={true} />

forceDarkOn

다크 테마 구성

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

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

타입필수 여부플랫폼
부울아니오Android

예시:

<WebView forceDarkOn={false} />

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

타입필수 여부플랫폼
객체 배열: {label: string, key: string}아니오iOS

예시:

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

onCustomMenuSelection

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

타입필수 여부플랫폼
함수아니오iOS
<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를 지원합니다.

타입필수 여부플랫폼
부울아니오Windows

예시:

<WebView useWebView2={true} />

minimumFontSize

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

타입필수 여부플랫폼
숫자아니오Android
<WebView minimumFontSize={1} />

예시:

downloadingMessage

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

유형필수플랫폼
문자열아니요Android

lackPermissionToDownloadMessage

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

유형필수플랫폼
문자열아니요Android

allowsProtectedMedia

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

유형필수플랫폼
부울아니요Android

메소드

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

기타 문서

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

번역

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