1) onNavigationStateChange
- 일반적으로는
onNavigationStateChange 이벤트에 핸들러 함수를 등록하면 대부분 확인 가능.
<WebView style={{ flex: 1 }}
ref={(r) => webView.ref = r}
onNavigationStateChange={(navState) => {
webView.url = navState.url;
webView.canGoBack = navState.canGoBack;
console.log("canGoBack : ", navState.canGoBack);
}}
source={{
uri: URL.forumUrl
}}
sharedCookiesEnabled={true}
/>
2) onLoadProgress
- 분명히 url 에 변화가 있음에도
onNavigationStateChange 이벤트로는 안잡히는 경우가 있다.
- 이런 경우에는
onLoadProgress 이벤트를 잡아서 처리 가능.
<WebView style={{ flex: 1 }}
ref={(r) => webView.ref = r}
onLoadProgress={(e)=>{
let canGoBack = e.nativeEvent.canGoBack;
webView.canGoBack = canGoBack;
console.log("canGOBack : ", canGoBack);
}}
domStorageEnabled = {true}
source={{
uri: URL.courseUrl,
}}
sharedCookiesEnabled={true}
/>
onLoadProgress 이벤트 발생 시 전달인자 구성
- 전달되는 내용이 엄청 많고, 로딩 시작, 로딩 종료 등 다양한 상황에서 발생하므로 호출 빈도가 비교적 잦다.
- 하지만 웹뷰 처리와 관련된 원하는 내용들은 다 담겨있으니 적절히 파싱해서 사용하기 좋다.
nativeEvent ← 현재url, 뒤로가기 앞으로가기 가능 여부 등
{
"_dispatchInstances": {
"_debugHookTypes": null,
"_debugID": 3501,
"_debugIsCurrentlyTiming": false,
"_debugNeedsRemount": false,
"_debugOwner": {
"_debugHookTypes": null,
"_debugID": 3493,
"_debugIsCurrentlyTiming": false,
"_debugNeedsRemount": false,
"_debugOwner": [FiberNode],
"_debugSource": null,
"actualDuration": 0,
"actualStartTime": 666178,
"alternate": [FiberNode],
"child": [FiberNode],
"childExpirationTime": 0,
"dependencies": null,
"effectTag": 0,
"elementType": [Function WebView],
"expirationTime": 1073741823,
"firstEffect": null,
"index": 0,
"key": null,
"lastEffect": null,
"memoizedProps": [Object],
"memoizedState": [Object],
"mode": 8,
"nextEffect": null,
"pendingProps": [Object],
"ref": [Function ref],
"return": [FiberNode],
"selfBaseDuration": 1,
"sibling": null,
"stateNode": [WebView],
"tag": 1,
"treeBaseDuration": 1,
"type": [Function WebView],
"updateQueue": [Object]
},
"_debugSource": null,
"actualDuration": 0,
"actualStartTime": 643869,
"alternate": {
"_debugHookTypes": null,
"_debugID": 3501,
"_debugIsCurrentlyTiming": false,
"_debugNeedsRemount": false,
"_debugOwner": [FiberNode],
"_debugSource": null,
"actualDuration": 1,
"actualStartTime": 625685,
"alternate": [Circular],
"child": null,
"childExpirationTime": 0,
"dependencies": null,
"effectTag": 4,
"elementType": "RNCWebView",
"expirationTime": 0,
"firstEffect": null,
"index": 0,
"key": "webViewKey",
"lastEffect": null,
"memoizedProps": [Object],
"memoizedState": null,
"mode": 8,
"nextEffect": null,
"pendingProps": [Object],
"ref": [Object],
"return": [FiberNode],
"selfBaseDuration": 1,
"sibling": null,
"stateNode": [ReactNativeFiberHostComponent],
"tag": 5,
"treeBaseDuration": 1,
"type": "RNCWebView",
"updateQueue": null
},
"child": null,
"childExpirationTime": 0,
"dependencies": null,
"effectTag": 4,
"elementType": "RNCWebView",
"expirationTime": 0,
"firstEffect": null,
"index": 0,
"key": "webViewKey",
"lastEffect": null,
"memoizedProps": {
"allowFileAccess": false,
"allowsFullscreenVideo": false,
"androidHardwareAccelerationDisabled": false,
"androidLayerType": "none",
"cacheEnabled": true,
"domStorageEnabled": true,
"javaScriptEnabled": true,
"messagingEnabled": false,
"messagingModuleName": "WebViewMessageHandler2",
"onHttpError": [Function anonymous],
"onLoadProgress": [Function onLoadProgress],
"onLoadingError": [Function anonymous],
"onLoadingFinish": [Function anonymous],
"onLoadingProgress": [Function anonymous],
"onLoadingStart": [Function anonymous],
"onMessage": [Function anonymous],
"onNavigationStateChange": [Function onNavigationStateChange],
"onRenderProcessGone": [Function anonymous],
"onShouldStartLoadWithRequest": [Function anonymous],
"overScrollMode": "always",
"saveFormDataDisabled": false,
"scalesPageToFit": true,
"setSupportMultipleWindows": true,
"sharedCookiesEnabled": true,
"source": [Object],
"style": [Array],
"thirdPartyCookiesEnabled": true
},
"memoizedState": null,
"mode": 8,
"nextEffect": null,
"pendingProps": {
"allowFileAccess": false,
"allowsFullscreenVideo": false,
"androidHardwareAccelerationDisabled": false,
"androidLayerType": "none",
"cacheEnabled": true,
"domStorageEnabled": true,
"javaScriptEnabled": true,
"messagingEnabled": false,
"messagingModuleName": "WebViewMessageHandler2",
"onHttpError": [Function anonymous],
"onLoadProgress": [Function onLoadProgress],
"onLoadingError": [Function anonymous],
"onLoadingFinish": [Function anonymous],
"onLoadingProgress": [Function anonymous],
"onLoadingStart": [Function anonymous],
"onMessage": [Function anonymous],
"onNavigationStateChange": [Function onNavigationStateChange],
"onRenderProcessGone": [Function anonymous],
"onShouldStartLoadWithRequest": [Function anonymous],
"overScrollMode": "always",
"saveFormDataDisabled": false,
"scalesPageToFit": true,
"setSupportMultipleWindows": true,
"sharedCookiesEnabled": true,
"source": [Object],
"style": [Array],
"thirdPartyCookiesEnabled": true
},
"ref": {
"current": [ReactNativeFiberHostComponent]
},
"return": {
"_debugHookTypes": null,
"_debugID": 3499,
"_debugIsCurrentlyTiming": false,
"_debugNeedsRemount": false,
"_debugOwner": [FiberNode],
"_debugSource": null,
"actualDuration": 0,
"actualStartTime": 643869,
"alternate": [FiberNode],
"child": [Circular],
"childExpirationTime": 0,
"dependencies": null,
"effectTag": 4,
"elementType": "RCTView",
"expirationTime": 0,
"firstEffect": [Circular],
"index": 0,
"key": null,
"lastEffect": [Circular],
"memoizedProps": [Object],
"memoizedState": null,
"mode": 8,
"nextEffect": null,
"pendingProps": [Object],
"ref": null,
"return": [FiberNode],
"selfBaseDuration": 0,
"sibling": null,
"stateNode": [ReactNativeFiberHostComponent],
"tag": 5,
"treeBaseDuration": 0,
"type": "RCTView",
"updateQueue": null
},
"selfBaseDuration": 0,
"sibling": null,
"stateNode": {
"_children": [Array],
"_internalFiberInstanceHandleDEV": [Circular],
"_nativeTag": 343,
"viewConfig": [Object]
},
"tag": 5,
"treeBaseDuration": 0,
"type": "RNCWebView",
"updateQueue": null
},
"_dispatchListeners": [Function anonymous],
"_targetInst": {
"_debugHookTypes": null,
"_debugID": 3501,
"_debugIsCurrentlyTiming": false,
"_debugNeedsRemount": false,
"_debugOwner": {
"_debugHookTypes": null,
"_debugID": 3493,
"_debugIsCurrentlyTiming": false,
"_debugNeedsRemount": false,
"_debugOwner": [FiberNode],
"_debugSource": null,
"actualDuration": 0,
"actualStartTime": 666178,
"alternate": [FiberNode],
"child": [FiberNode],
"childExpirationTime": 0,
"dependencies": null,
"effectTag": 0,
"elementType": [Function WebView],
"expirationTime": 1073741823,
"firstEffect": null,
"index": 0,
"key": null,
"lastEffect": null,
"memoizedProps": [Object],
"memoizedState": [Object],
"mode": 8,
"nextEffect": null,
"pendingProps": [Object],
"ref": [Function ref],
"return": [FiberNode],
"selfBaseDuration": 1,
"sibling": null,
"stateNode": [WebView],
"tag": 1,
"treeBaseDuration": 1,
"type": [Function WebView],
"updateQueue": [Object]
},
"_debugSource": null,
"actualDuration": 0,
"actualStartTime": 643869,
"alternate": {
"_debugHookTypes": null,
"_debugID": 3501,
"_debugIsCurrentlyTiming": false,
"_debugNeedsRemount": false,
"_debugOwner": [FiberNode],
"_debugSource": null,
"actualDuration": 1,
"actualStartTime": 625685,
"alternate": [Circular],
"child": null,
"childExpirationTime": 0,
"dependencies": null,
"effectTag": 4,
"elementType": "RNCWebView",
"expirationTime": 0,
"firstEffect": null,
"index": 0,
"key": "webViewKey",
"lastEffect": null,
"memoizedProps": [Object],
"memoizedState": null,
"mode": 8,
"nextEffect": null,
"pendingProps": [Object],
"ref": [Object],
"return": [FiberNode],
"selfBaseDuration": 1,
"sibling": null,
"stateNode": [ReactNativeFiberHostComponent],
"tag": 5,
"treeBaseDuration": 1,
"type": "RNCWebView",
"updateQueue": null
},
"child": null,
"childExpirationTime": 0,
"dependencies": null,
"effectTag": 4,
"elementType": "RNCWebView",
"expirationTime": 0,
"firstEffect": null,
"index": 0,
"key": "webViewKey",
"lastEffect": null,
"memoizedProps": {
"allowFileAccess": false,
"allowsFullscreenVideo": false,
"androidHardwareAccelerationDisabled": false,
"androidLayerType": "none",
"cacheEnabled": true,
"domStorageEnabled": true,
"javaScriptEnabled": true,
"messagingEnabled": false,
"messagingModuleName": "WebViewMessageHandler2",
"onHttpError": [Function anonymous],
"onLoadProgress": [Function onLoadProgress],
"onLoadingError": [Function anonymous],
"onLoadingFinish": [Function anonymous],
"onLoadingProgress": [Function anonymous],
"onLoadingStart": [Function anonymous],
"onMessage": [Function anonymous],
"onNavigationStateChange": [Function onNavigationStateChange],
"onRenderProcessGone": [Function anonymous],
"onShouldStartLoadWithRequest": [Function anonymous],
"overScrollMode": "always",
"saveFormDataDisabled": false,
"scalesPageToFit": true,
"setSupportMultipleWindows": true,
"sharedCookiesEnabled": true,
"source": [Object],
"style": [Array],
"thirdPartyCookiesEnabled": true
},
"memoizedState": null,
"mode": 8,
"nextEffect": null,
"pendingProps": {
"allowFileAccess": false,
"allowsFullscreenVideo": false,
"androidHardwareAccelerationDisabled": false,
"androidLayerType": "none",
"cacheEnabled": true,
"domStorageEnabled": true,
"javaScriptEnabled": true,
"messagingEnabled": false,
"messagingModuleName": "WebViewMessageHandler2",
"onHttpError": [Function anonymous],
"onLoadProgress": [Function onLoadProgress],
"onLoadingError": [Function anonymous],
"onLoadingFinish": [Function anonymous],
"onLoadingProgress": [Function anonymous],
"onLoadingStart": [Function anonymous],
"onMessage": [Function anonymous],
"onNavigationStateChange": [Function onNavigationStateChange],
"onRenderProcessGone": [Function anonymous],
"onShouldStartLoadWithRequest": [Function anonymous],
"overScrollMode": "always",
"saveFormDataDisabled": false,
"scalesPageToFit": true,
"setSupportMultipleWindows": true,
"sharedCookiesEnabled": true,
"source": [Object],
"style": [Array],
"thirdPartyCookiesEnabled": true
},
"ref": {
"current": [ReactNativeFiberHostComponent]
},
"return": {
"_debugHookTypes": null,
"_debugID": 3499,
"_debugIsCurrentlyTiming": false,
"_debugNeedsRemount": false,
"_debugOwner": [FiberNode],
"_debugSource": null,
"actualDuration": 0,
"actualStartTime": 643869,
"alternate": [FiberNode],
"child": [Circular],
"childExpirationTime": 0,
"dependencies": null,
"effectTag": 4,
"elementType": "RCTView",
"expirationTime": 0,
"firstEffect": [Circular],
"index": 0,
"key": null,
"lastEffect": [Circular],
"memoizedProps": [Object],
"memoizedState": null,
"mode": 8,
"nextEffect": null,
"pendingProps": [Object],
"ref": null,
"return": [FiberNode],
"selfBaseDuration": 0,
"sibling": null,
"stateNode": [ReactNativeFiberHostComponent],
"tag": 5,
"treeBaseDuration": 0,
"type": "RCTView",
"updateQueue": null
},
"selfBaseDuration": 0,
"sibling": null,
"stateNode": {
"_children": [Array],
"_internalFiberInstanceHandleDEV": [Circular],
"_nativeTag": 343,
"viewConfig": [Object]
},
"tag": 5,
"treeBaseDuration": 0,
"type": "RNCWebView",
"updateQueue": null
},
"bubbles": undefined,
"cancelable": undefined,
"currentTarget": {
],
"_internalFiberInstanceHandleDEV": {
"_debugHookTypes": null,
"_debugID": 3501,
"_debugIsCurrentlyTiming": false,
"_debugNeedsRemount": false,
"_debugOwner": [FiberNode],
"_debugSource": null,
"actualDuration": 0,
"actualStartTime": 643869,
"alternate": [FiberNode],
"child": null,
"childExpirationTime": 0,
"dependencies": null,
"effectTag": 4,
"elementType": "RNCWebView",
"expirationTime": 0,
"firstEffect": null,
"index": 0,
"key": "webViewKey",
"lastEffect": null,
"memoizedProps": [Object],
"memoizedState": null,
"mode": 8,
"nextEffect": null,
"pendingProps": [Object],
"ref": [Object],
"return": [FiberNode],
"selfBaseDuration": 0,
"sibling": null,
"stateNode": [Circular],
"tag": 5,
"treeBaseDuration": 0,
"type": "RNCWebView",
"updateQueue": null
},
"_nativeTag": 343,
"viewConfig": {
"Commands": [Object],
"NativeProps": [Object],
"bubblingEventTypes": undefined,
"directEventTypes": [Object],
"uiViewClassName": "RNCWebView",
"validAttributes": [Object]
}
},
"defaultPrevented": undefined,
"dispatchConfig": {
"registrationName": "onLoadingProgress"
},
"eventPhase": undefined,
"isDefaultPrevented": [Function functionThatReturnsFalse],
"isPropagationStopped": [Function functionThatReturnsFalse],
"isTrusted": undefined,
"nativeEvent": {
"canGoBack": true,
"canGoForward": false,
"progress": 1,
"target": 343,
"title": "구공팩토리",
"url": "http://192.168.25.9:3000/student/classroom/React-%EB%93%A4%EC%96%B4%EA%B0%80%EA%B8%B0"
},
"target": {
],
"_internalFiberInstanceHandleDEV": {
"_debugHookTypes": null,
"_debugID": 3501,
"_debugIsCurrentlyTiming": false,
"_debugNeedsRemount": false,
"_debugOwner": [FiberNode],
"_debugSource": null,
"actualDuration": 0,
"actualStartTime": 643869,
"alternate": [FiberNode],
"child": null,
"childExpirationTime": 0,
"dependencies": null,
"effectTag": 4,
"elementType": "RNCWebView",
"expirationTime": 0,
"firstEffect": null,
"index": 0,
"key": "webViewKey",
"lastEffect": null,
"memoizedProps": [Object],
"memoizedState": null,
"mode": 8,
"nextEffect": null,
"pendingProps": [Object],
"ref": [Object],
"return": [FiberNode],
"selfBaseDuration": 0,
"sibling": null,
"stateNode": [Circular],
"tag": 5,
"treeBaseDuration": 0,
"type": "RNCWebView",
"updateQueue": null
},
"_nativeTag": 343,
"viewConfig": {
"Commands": [Object],
"NativeProps": [Object],
"bubblingEventTypes": undefined,
"directEventTypes": [Object],
"uiViewClassName": "RNCWebView",
"validAttributes": [Object]
}
},
"timeStamp": 1609927122646,
"type": undefined
}