[React Native] react native webview
- 1.
<MapView />
Component API - React Native WebView API Reference
- ์ฐธ์กฐ
- ์์ฑ
source
automaticallyAdjustContentInsets
automaticallyAdjustsScrollIndicatorInsets
injectedJavaScript
injectedJavaScriptBeforeContentLoaded
injectedJavaScriptForMainFrameOnly
injectedJavaScriptBeforeContentLoadedForMainFrameOnly
mediaPlaybackRequiresUserAction
nativeConfig
onError
onLoad
onLoadEnd
onLoadStart
onLoadProgress
onHttpError
onRenderProcessGone
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
โฌshowsHorizontalScrollIndicator
โฌshowsVerticalScrollIndicator
โฌgeolocationEnabled
โฌallowFileAccessFromFileURLs
โฌallowUniversalAccessFromFileURLs
โฌallowingReadAccessToURL
โฌkeyboardDisplayRequiresUserAction
โฌhideKeyboardAccessoryView
โฌallowsBackForwardNavigationGestures
โฌincognito
โฌallowFileAccess
โฌsaveFormDataDisabled
โฌcacheEnabled
โฌcacheMode
โฌpagingEnabled
โฌallowsLinkPreview
โฌsharedCookiesEnabled
โฌtextZoom
โฌpullToRefreshEnabled
โฌignoreSilentHardwareSwitch
โฌonFileDownload
โฌlimitsNavigationsToAppBoundDomains
โฌtextInteractionEnabled
โฌmediaCapturePermissionGrantType
autoManageStatusBarEnabled
setSupportMultipleWindows
enableApplePay
forceDarkOn
menuItems
onCustomMenuSelection
basicAuthCredential
useWebView2
minimumFontSize
downloadingMessage
lackPermissionToDownloadMessage
allowsProtectedMedia
- ๋ฉ์๋
- ๊ธฐํ ๋ฌธ์
- ๋ฒ์ญ
- ์์ฑ
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=
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=
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=
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=
onLoad={(syntheticEvent) => {
const { nativeEvent } = syntheticEvent;
this.url = nativeEvent.url;
}}
/>
onLoad
์ ์ ๋ฌ๋ ํจ์๋ ๋ค์ ์์ฑ์ด ์๋ nativeEvent๋ฅผ ๋ํํ๋ SyntheticEvent์ ํจ๊ป ํธ์ถ๋ฉ๋๋ค.
canGoBack;
canGoForward;
loading;
target;
title;
url;
onLoadEnd
WebView ๋ก๋๊ฐ ์ฑ๊ณตํ๊ฑฐ๋ ์คํจํ๋ฉด ํธ์ถ๋๋ ํจ์์ ๋๋ค.
์ ํ | ํ์ |
---|---|
function | ์๋์ค |
์:
<WebView
source=
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=
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=
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=
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=
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=
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=
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=
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=
originWhitelist={["https://*", "git://*"]}
/>
renderError
โฌ
์ค๋ฅ๊ฐ์์ ๊ฒฝ์ฐ ํ์ ํ ๋ณด๊ธฐ๋ฅผ ๋ฐํํ๋ ํจ์์ ๋๋ค.
์ ํ | ํ์ | ํ๋ซํผ |
---|---|---|
ํจ์ | ์๋์ค | iOS, Android, macOS |
์์ :
<WebView
source=
renderError={(errorName) => <Error name={errorName} />}
/>
renderError
์ ์ ๋ฌ ๋ ํจ์๋ ์ค๋ฅ์ ์ด๋ฆ์ผ๋ก ํธ์ถ๋ฉ๋๋ค.
renderLoading
โฌ
๋ก๋ฉ ํ์๊ธฐ๋ฅผ ๋ฐํํ๋ ํจ์์ ๋๋ค. startInLoadingState ํ๋กํผํฐ๋ ์ด ํ๋กํผํฐ๋ฅผ ์ฌ์ฉํ๋ ค๋ฉด true๋ก ์ค์ ํด์ผํฉ๋๋ค.
์ ํ | ํ์ | ํ๋ซํผ |
---|---|---|
ํจ์ | ์๋์ค | iOS, Android, macOS |
์์ :
<WebView
source=
startInLoadingState={true}
renderLoading={() => <Loading />}
/>
scalesPageToFit
โฌ
์น ์ฝํ
์ธ ๋ฅผ๋ณด๊ธฐ์ ๋ง๊ฒ ํ๋ / ์ถ์ํ๊ณ ์ฌ์ฉ์๊ฐ ํฌ๊ธฐ๋ฅผ ์กฐ์ ํ ์ ์๋๋กํ๋ ๋ถ๋ฆฌ์ธ์
๋๋ค. ๊ธฐ๋ณธ๊ฐ์ true
์
๋๋ค.
์ ํ | ํ์ | ํ๋ซํผ |
---|---|---|
๋ถ์ธ | ์๋์ค | Android |
onShouldStartLoadWithRequest
โฌ
์น ๋ทฐ ์์ฒญ์ ์ฌ์ฉ์ ์ ์ ์ฒ๋ฆฌํ๋ ํจ์์ ๋๋ค. ํจ์์์ true๋ฅผ ๋ฐํํ๋ฉด ์์ฒญ์ ๊ณ์๋ก๋ํ๊ณ false๋ฅผ ๋ฐํํ๋ฉด๋ก๋๋ฅผ ์ค์งํฉ๋๋ค.
Android์์๋ ์ฒซ ๋ฒ์งธ ๋ก๋์์ ํธ์ถ๋์ง ์์ต๋๋ค.
์ ํ | ํ์ | ํ๋ซํผ |
---|---|---|
ํจ์ | ์๋์ค | iOS, Android, macOS |
์์ :
<WebView
source=
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=
style=
/>
containerStyle
โฌ
WebView ์ปจํ
์ด๋ ์คํ์ผ์ ์ฌ์ฉ์ ์ ์ ํ ์์๋ ์คํ์ผ ๊ฐ์ฒด์
๋๋ค. ๊ธฐ๋ณธ ์คํ์ผ์ด ์์ต๋๋ค (์ :height
์์ฑ์ ์ฌ์ฉํ๋ ค๋ฉด ์คํ์ผ์flex : 0
์ ์ถ๊ฐํด์ผํฉ๋๋ค).
์ ํ | ํ์ |
---|---|
์คํ์ผ | ์๋์ค |
์์ :
<WebView
source=
containerStyle=
/>
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์ ํ๋์จ์ด ๋ ๋๋ง ํ์ดํ ๋ผ์ธ์ ์ฌ์ฉํ์ฌ ๋ทฐ๋ฅผ ๋ ๋๋งํฉ๋๋ค.
Type | Required | Platform |
---|---|---|
string | No | Android |
mixedContentMode
โฌ
ํผํฉ ์ฝํ ์ธ ๋ชจ๋๋ฅผ ์ง์ ํฉ๋๋ค. ์ฆ, WebView๋ ์์ ํ ์ถ์ฒ์์ ๋ค๋ฅธ ์ถ์ฒ์ ์ฝํ ์ธ ๋ฅผ ๋ก๋ํ ์ ์์ต๋๋ค.
mixedContentMode
์ ๊ฐ๋ฅํ ๊ฐ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
never
(๊ธฐ๋ณธ๊ฐ) - WebView๋ ์์ ํ ์ถ์ฒ์์ ๋ถ์์ ํ ์ถ์ฒ์ ์ฝํ ์ธ ๋ฅผ ๋ก๋ํ ์ ์์ต๋๋ค.always
- WebView๋ ์์ ํ ์ถ์ฒ๊ฐ ์๋๋๋ผ๋ ์์ ํ ์ถ์ฒ์์ ์ฝํ ์ธ ๋ฅผ ๋ก๋ํ ์ ์์ต๋๋ค.compatibility
- WebView๋ ํผํฉ ์ฝํ ์ธ ์ ๋ํ ํ๋์ ์ธ ์น ๋ธ๋ผ์ฐ์ ์ ๊ทผ ๋ฐฉ์๊ณผ ํธํ๋๋๋ก ์๋ํฉ๋๋ค.
์ ํ | ํ์ | ํ๋ซํผ |
---|---|---|
๋ฌธ์์ด | ์๋์ค | ์๋๋ก์ด๋ |
thirdPartyCookiesEnabled
โฌ
WebView
์์ ํ์ฌ ์ฟ ํค๋ฅผ ์ฌ์ฉํ๋๋ก ํ๋ ๋ถ์ธ ๊ฐ์
๋๋ค. ์ด ๊ธฐ๋ฅ์ ์๋๋ก์ด๋ ๋กค๋ฆฌํ ์ด์์์๋ง ์ฌ์ฉํ ์ ์์ผ๋ฉฐ, ํท์บฃ ์ดํ ๋ฒ์ ์์๋ ๊ธฐ๋ณธ์ ์ผ๋ก ํ์ฌ ์ฟ ํค๊ฐ ํ์ฑํ๋ฉ๋๋ค. ๊ธฐ๋ณธ๊ฐ์ true
์
๋๋ค. ์ฟ ํค์ ๋ํ ์์ธํ ๋ด์ฉ์ ๊ฐ์ด๋๋ฅผ ์ฐธ์กฐํ์ญ์์ค.
์ ํ | ํ์ | ํ๋ซํผ |
---|---|---|
๋ถ์ธ | ์๋์ค | ์๋๋ก์ด๋ |
userAgent
โฌ
WebView์ ์ฌ์ฉ์ ์์ด์ ํธ๋ฅผ ์ค์ ํฉ๋๋ค.
์ ํ | ํ์ | ํ๋ซํผ |
---|---|---|
๋ฌธ์์ด | ์๋์ค | iOS, ์๋๋ก์ด๋, macOS |
applicationNameForUserAgent
โฌ
๊ธฐ์กด ์ฌ์ฉ์ ์์ด์ ํธ์ ์ถ๊ฐํฉ๋๋ค. userAgent
๋ฅผ ์ค์ ํ๋ฉด ์ฌ์ ์๋ฉ๋๋ค.
์ ํ | ํ์ | ํ๋ซํผ |
---|---|---|
๋ฌธ์์ด | ์๋์ค | iOS, ์๋๋ก์ด๋, macOS |
<WebView
source=
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 | ์๋์ค | true | iOS, Android, macOS |
cacheMode
โฌ
์บ์ ์ฌ์ฉ ๋ฐฉ๋ฒ์ ์ฌ์ ์ํฉ๋๋ค. ์บ์ ์ฌ์ฉ ๋ฐฉ๋ฒ์ ํ์ ์ ํ์ ๋ฐ๋ผ ๊ฒฐ์ ๋ฉ๋๋ค. ์ผ๋ฐ ํ์ด์ง ๋ก๋์ ๊ฒฝ์ฐ ์บ์๊ฐ ํ์ธ๋๊ณ ํ์์ ๋ฐ๋ผ ์ฝํ ์ธ ๊ฐ ๋ค์ ์ ํจ์ฑ์ด ๊ฒ์ฆ๋ฉ๋๋ค. ๋ค๋ก ํ์ํ ๋ ์ฝํ ์ธ ๊ฐ ๋ค์ ์ ํจ์ฑ ๊ฒ์ฌ๋์ง ์์ผ๋ฉฐ ๋์ ์บ์์์ ์ฝํ ์ธ ๋ง ๊ฒ์๋ฉ๋๋ค. ์ด ์์ฑ์ ์ฌ์ฉํ๋ฉด ํด๋ผ์ด์ธํธ๊ฐ์ด ๋์์ ๋ฌด์ํ ์ ์์ต๋๋ค.
๊ฐ๋ฅํ ๊ฐ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
LOAD_DEFAULT
ย - ๊ธฐ๋ณธ ์บ์ ์ฌ์ฉ ๋ชจ๋์ ๋๋ค. ํ์ ์ ํ์ด ํน์ ๋์์ ์๊ตฌํ์ง ์์ผ๋ฉด ์ฌ์ฉ ๊ฐ๋ฅํ๊ณ ๋ง๋ฃ๋์ง ์์ ๊ฒฝ์ฐ ์บ์๋ ๋ฆฌ์์ค๋ฅผ ์ฌ์ฉํ๊ณ ๊ทธ๋ ์ง ์์ผ๋ฉด ๋คํธ์ํฌ์์ ๋ฆฌ์์ค๋ฅผ๋ก๋ํฉ๋๋ค.LOAD_CACHE_ELSE_NETWORK
ย - ๋ง๋ฃ๋ ๊ฒฝ์ฐ๋ผ๋ ์ฌ์ฉ ๊ฐ๋ฅํ ๊ฒฝ์ฐ ์บ์๋ ๋ฆฌ์์ค๋ฅผ ์ฌ์ฉํ๊ณ ๊ทธ๋ ์ง ์์ผ๋ฉด ๋คํธ์ํฌ์์ ๋ฆฌ์์ค๋ฅผ๋ก๋ํฉ๋๋ค.LOAD_NO_CACHE
ย - ์บ์๋ฅผ ์ฌ์ฉํ์ง ์๊ณ ๋คํธ์ํฌ์์๋ก๋ํฉ๋๋ค.LOAD_CACHE_ONLY
ย - ๋คํธ์ํฌ๋ฅผ ์ฌ์ฉํ์ง ์๊ณ ์บ์์์ ๋ก๋ํฉ๋๋ค.
ํ์ | ํ์ ์ฌ๋ถ | ๊ธฐ๋ณธ๊ฐ | ํ๋ซํผ |
---|---|---|---|
string | ์๋์ค | LOAD_DEFAULT | Android |
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=
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์ผ๋ก ์ดํํ ์ ์๋ ์ด ์ทจ์ฝ์ ์ ๋ ธ์ถ๋ ์ ์์ต๋๋ค.
ํ์ | ํ์ ์ฌ๋ถ | ๊ธฐ๋ณธ๊ฐ | ํ๋ซํผ |
---|---|---|---|
๋ถ์ธ | ์๋์ค | true | Android |
์์:
<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");
ํ์ | ํ์ ์ฌ๋ถ | ๊ธฐ๋ณธ๊ฐ | ํ๋ซํผ |
---|---|---|---|
๋ถ์ธ | ์๋์ค | false | iOS |
์์:
<WebView enableApplePay={true} />
forceDarkOn
๋คํฌ ํ ๋ง ๊ตฌ์ฑ
์ฐธ๊ณ : force dark ์ค์ ์ ์ง์์ ์ด์ง ์์ต๋๋ค. ์ฑ ํ๋ก์ธ์ค๊ฐ ์์๋ ๋๋ง๋ค ์ ์ ๋ฉ์๋๋ฅผ ํธ์ถํด์ผ ํฉ๋๋ค.
์ฐธ๊ณ : ๋ฐค<->๋ฎ ๋ชจ๋ ์ ํ์ ๊ตฌ์ฑ ๋ณ๊ฒฝ์ด๋ฏ๋ก ๊ธฐ๋ณธ์ ์ผ๋ก ํ๋์ด ๋ค์ ์์๋๊ณ ์ ๊ฐ์ผ๋ก ํ ๋ง๋ฅผ ์ ์ฉํฉ๋๋ค. ์ด ๊ธฐ๋ณธ ๋์์ ์ฌ์ ์ํ๋ ๊ฒฝ์ฐ ์ด ๋ฉ์๋๊ฐ ์ฌ์ ํ ๋ณ๊ฒฝ์ด ์๊ธธ ๋๋ง๋ค ํธ์ถ๋๋๋กํด์ผ ํฉ๋๋ค.
ํ์ | ํ์ ์ฌ๋ถ | ํ๋ซํผ |
---|---|---|
๋ถ์ธ | ์๋์ค | Android |
์์:
<WebView forceDarkOn={false} />
menuItems
์ ํํ ํ
์คํธ ๋ค์์ ๋ํ๋๋ 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
๊ธฐํ ๋ฌธ์
์์ ๊ฐ์ด๋ย ๋ฐย ์ฌ์ธต ๊ฐ์ด๋๋ ํ์ธํ์ธ์.
๋ฒ์ญ
์ด ํ์ผ์ ๋ค์ ์์น์์ ์ฌ์ฉํ ์ ์์ต๋๋ค.