From 7241bf1a7096151eeebc3a93c04f7afb76063585 Mon Sep 17 00:00:00 2001 From: Ivan Jim Date: Tue, 26 Feb 2019 11:20:39 +0800 Subject: [PATCH] Use WebView from react-native-webview as it has been deprecated from react-native --- examples/SampleRN20/app.js | 4 +- package.json | 3 +- webview-bridge/index.android.js | 40 ++-- webview-bridge/index.ios.js | 314 ++++++++++++++++---------------- 4 files changed, 181 insertions(+), 180 deletions(-) diff --git a/examples/SampleRN20/app.js b/examples/SampleRN20/app.js index dff44784..d4e5d3b0 100644 --- a/examples/SampleRN20/app.js +++ b/examples/SampleRN20/app.js @@ -8,9 +8,9 @@ var React = require('react-native'); var { StyleSheet, Text, - View, - WebView + View } = React; +var WebView = require('react-native-webview') var createReactClass = require('create-react-class'); var WebViewBridge = require('react-native-webview-bridge'); diff --git a/package.json b/package.json index 53ae3586..346e3d4b 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "create-react-class": "^15.6.0", "invariant": "^2.2.2", "keymirror": "0.1.1", - "prop-types": "^15.5.10" + "prop-types": "^15.5.10", + "react-native-webview": "^5.2.1" } } diff --git a/webview-bridge/index.android.js b/webview-bridge/index.android.js index 14e5e263..6eb867af 100644 --- a/webview-bridge/index.android.js +++ b/webview-bridge/index.android.js @@ -20,6 +20,7 @@ var createReactClass = require('create-react-class'); var invariant = require('invariant'); var keyMirror = require('keymirror'); var resolveAssetSource = require('react-native/Libraries/Image/resolveAssetSource'); +var WebView = require('react-native-webview'); var { ReactNativeViewAttributes, @@ -29,7 +30,6 @@ var { Text, View, ViewPropTypes, - WebView, requireNativeComponent, DeviceEventEmitter, NativeModules: { @@ -61,7 +61,7 @@ var WebViewBridge = createReactClass({ onBridgeMessage: PropTypes.func, }, - getInitialState: function() { + getInitialState: function () { return { viewState: WebViewBridgeState.IDLE, lastErrorEvent: null, @@ -69,8 +69,8 @@ var WebViewBridge = createReactClass({ }; }, - - componentWillMount: function() { + + componentWillMount: function () { DeviceEventEmitter.addListener("webViewBridgeMessage", (body) => { const { onBridgeMessage } = this.props; const message = body.message; @@ -80,14 +80,14 @@ var WebViewBridge = createReactClass({ }); if (this.props.startInLoadingState) { - this.setState({viewState: WebViewBridgeState.LOADING}); + this.setState({ viewState: WebViewBridgeState.LOADING }); } }, - render: function() { + render: function () { var otherView = null; - if (this.state.viewState === WebViewBridgeState.LOADING) { + if (this.state.viewState === WebViewBridgeState.LOADING) { otherView = this.props.renderLoading && this.props.renderLoading(); } else if (this.state.viewState === WebViewBridgeState.ERROR) { var errorEvent = this.state.lastErrorEvent; @@ -106,7 +106,7 @@ var WebViewBridge = createReactClass({ webViewStyles.push(styles.hidden); } - var {javaScriptEnabled, domStorageEnabled} = this.props; + var { javaScriptEnabled, domStorageEnabled } = this.props; if (this.props.javaScriptEnabledAndroid) { console.warn('javaScriptEnabledAndroid is deprecated. Use javaScriptEnabled instead'); javaScriptEnabled = this.props.javaScriptEnabledAndroid; @@ -116,13 +116,13 @@ var WebViewBridge = createReactClass({ domStorageEnabled = this.props.domStorageEnabledAndroid; } - let {source, ...props} = {...this.props}; + let { source, ...props } = { ...this.props }; var webView = ( - + ); var defaultRenderError = (errorDomain, errorCode, errorDesc) => ( @@ -111,172 +111,172 @@ var WebViewBridge = createReactClass({ keyboardDisplayRequiresUserAction: PropTypes.bool, }, - getInitialState: function() { + getInitialState: function () { return { viewState: WebViewBridgeState.IDLE, lastErrorEvent: (null: ?ErrorEvent), - startInLoadingState: true, + startInLoadingState: true, }; }, - componentWillMount: function() { - if (this.props.startInLoadingState) { - this.setState({viewState: WebViewBridgeState.LOADING}); - } - }, - - render: function() { - var otherView = null; - - if (this.state.viewState === WebViewBridgeState.LOADING) { - otherView = (this.props.renderLoading || defaultRenderLoading)(); - } else if (this.state.viewState === WebViewBridgeState.ERROR) { - var errorEvent = this.state.lastErrorEvent; - invariant( - errorEvent != null, - 'lastErrorEvent expected to be non-null' - ); - otherView = (this.props.renderError || defaultRenderError)( - errorEvent.domain, - errorEvent.code, - errorEvent.description - ); - } else if (this.state.viewState !== WebViewBridgeState.IDLE) { - console.error( - 'RCTWebViewBridge invalid state encountered: ' + this.state.loading - ); - } - - var webViewStyles = [styles.container, styles.webView, this.props.style]; - if (this.state.viewState === WebViewBridgeState.LOADING || - this.state.viewState === WebViewBridgeState.ERROR) { - // if we're in either LOADING or ERROR states, don't show the webView - webViewStyles.push(styles.hidden); - } - - var onShouldStartLoadWithRequest = this.props.onShouldStartLoadWithRequest && ((event: Event) => { - var shouldStart = this.props.onShouldStartLoadWithRequest && - this.props.onShouldStartLoadWithRequest(event.nativeEvent); - RCTWebViewBridgeManager.startLoadWithResult(!!shouldStart, event.nativeEvent.lockIdentifier); - }); - - var {javaScriptEnabled, domStorageEnabled} = this.props; - if (this.props.javaScriptEnabledAndroid) { - console.warn('javaScriptEnabledAndroid is deprecated. Use javaScriptEnabled instead'); - javaScriptEnabled = this.props.javaScriptEnabledAndroid; - } - if (this.props.domStorageEnabledAndroid) { - console.warn('domStorageEnabledAndroid is deprecated. Use domStorageEnabled instead'); - domStorageEnabled = this.props.domStorageEnabledAndroid; - } - - var onBridgeMessage = (event: Event) => { - const onBridgeMessageCallback = this.props.onBridgeMessage; - if (onBridgeMessageCallback) { - const messages = event.nativeEvent.messages; - if (messages && typeof messages.forEach === "function") - messages.forEach((message) => { - onBridgeMessageCallback(message); - }); - } - }; - - let {source, ...props} = {...this.props}; - delete props.onBridgeMessage; - delete props.onShouldStartLoadWithRequest; - - var webView = - ; - - return ( - - {webView} - {otherView} - +componentWillMount: function() { + if (this.props.startInLoadingState) { + this.setState({ viewState: WebViewBridgeState.LOADING }); + } +}, + +render: function() { + var otherView = null; + + if (this.state.viewState === WebViewBridgeState.LOADING) { + otherView = (this.props.renderLoading || defaultRenderLoading)(); + } else if (this.state.viewState === WebViewBridgeState.ERROR) { + var errorEvent = this.state.lastErrorEvent; + invariant( + errorEvent != null, + 'lastErrorEvent expected to be non-null' ); - }, - - goForward: function() { - UIManager.dispatchViewManagerCommand( - this.getWebViewBridgeHandle(), - UIManager.RCTWebViewBridge.Commands.goForward, - null + otherView = (this.props.renderError || defaultRenderError)( + errorEvent.domain, + errorEvent.code, + errorEvent.description ); - }, - - goBack: function() { - UIManager.dispatchViewManagerCommand( - this.getWebViewBridgeHandle(), - UIManager.RCTWebViewBridge.Commands.goBack, - null + } else if (this.state.viewState !== WebViewBridgeState.IDLE) { + console.error( + 'RCTWebViewBridge invalid state encountered: ' + this.state.loading ); - }, - - reload: function() { - UIManager.dispatchViewManagerCommand( - this.getWebViewBridgeHandle(), - UIManager.RCTWebViewBridge.Commands.reload, - null - ); - }, - - sendToBridge: function (message: string) { - WebViewBridgeManager.sendToBridge(this.getWebViewBridgeHandle(), message); - }, - - /** - * We return an event with a bunch of fields including: - * url, title, loading, canGoBack, canGoForward - */ - updateNavigationState: function(event: Event) { - if (this.props.onNavigationStateChange) { - this.props.onNavigationStateChange(event.nativeEvent); + } + + var webViewStyles = [styles.container, styles.webView, this.props.style]; + if (this.state.viewState === WebViewBridgeState.LOADING || + this.state.viewState === WebViewBridgeState.ERROR) { + // if we're in either LOADING or ERROR states, don't show the webView + webViewStyles.push(styles.hidden); + } + + var onShouldStartLoadWithRequest = this.props.onShouldStartLoadWithRequest && ((event: Event) => { + var shouldStart = this.props.onShouldStartLoadWithRequest && + this.props.onShouldStartLoadWithRequest(event.nativeEvent); + RCTWebViewBridgeManager.startLoadWithResult(!!shouldStart, event.nativeEvent.lockIdentifier); + }); + + var { javaScriptEnabled, domStorageEnabled } = this.props; + if (this.props.javaScriptEnabledAndroid) { + console.warn('javaScriptEnabledAndroid is deprecated. Use javaScriptEnabled instead'); + javaScriptEnabled = this.props.javaScriptEnabledAndroid; + } + if (this.props.domStorageEnabledAndroid) { + console.warn('domStorageEnabledAndroid is deprecated. Use domStorageEnabled instead'); + domStorageEnabled = this.props.domStorageEnabledAndroid; + } + + var onBridgeMessage = (event: Event) => { + const onBridgeMessageCallback = this.props.onBridgeMessage; + if (onBridgeMessageCallback) { + const messages = event.nativeEvent.messages; + if (messages && typeof messages.forEach === "function") + messages.forEach((message) => { + onBridgeMessageCallback(message); + }); } - }, - - getWebViewBridgeHandle: function(): any { - return ReactNative.findNodeHandle(this.refs[RCT_WEBVIEWBRIDGE_REF]); - }, + }; + + let { source, ...props } = { ...this.props }; + delete props.onBridgeMessage; + delete props.onShouldStartLoadWithRequest; + + var webView = + ; + + return ( + + {webView} + {otherView} + + ); +}, + +goForward: function() { + UIManager.dispatchViewManagerCommand( + this.getWebViewBridgeHandle(), + UIManager.RCTWebViewBridge.Commands.goForward, + null + ); +}, + +goBack: function() { + UIManager.dispatchViewManagerCommand( + this.getWebViewBridgeHandle(), + UIManager.RCTWebViewBridge.Commands.goBack, + null + ); +}, + +reload: function() { + UIManager.dispatchViewManagerCommand( + this.getWebViewBridgeHandle(), + UIManager.RCTWebViewBridge.Commands.reload, + null + ); +}, + +sendToBridge: function (message: string) { + WebViewBridgeManager.sendToBridge(this.getWebViewBridgeHandle(), message); +}, - onLoadingStart: function(event: Event) { - var onLoadStart = this.props.onLoadStart; - onLoadStart && onLoadStart(event); - this.updateNavigationState(event); - }, - - onLoadingError: function(event: Event) { - event.persist(); // persist this event because we need to store it - var {onError, onLoadEnd} = this.props; - onError && onError(event); - onLoadEnd && onLoadEnd(event); - console.warn('Encountered an error loading page', event.nativeEvent); - - this.setState({ - lastErrorEvent: event.nativeEvent, - viewState: WebViewBridgeState.ERROR, - }); - }, - - onLoadingFinish: function(event: Event) { - var {onLoad, onLoadEnd} = this.props; - onLoad && onLoad(event); - onLoadEnd && onLoadEnd(event); - this.setState({ - viewState: WebViewBridgeState.IDLE, - }); - this.updateNavigationState(event); - }, +/** + * We return an event with a bunch of fields including: + * url, title, loading, canGoBack, canGoForward + */ +updateNavigationState: function(event: Event) { + if (this.props.onNavigationStateChange) { + this.props.onNavigationStateChange(event.nativeEvent); + } +}, + +getWebViewBridgeHandle: function(): any { + return ReactNative.findNodeHandle(this.refs[RCT_WEBVIEWBRIDGE_REF]); +}, + +onLoadingStart: function(event: Event) { + var onLoadStart = this.props.onLoadStart; + onLoadStart && onLoadStart(event); + this.updateNavigationState(event); +}, + +onLoadingError: function(event: Event) { + event.persist(); // persist this event because we need to store it + var { onError, onLoadEnd } = this.props; + onError && onError(event); + onLoadEnd && onLoadEnd(event); + console.warn('Encountered an error loading page', event.nativeEvent); + + this.setState({ + lastErrorEvent: event.nativeEvent, + viewState: WebViewBridgeState.ERROR, + }); +}, + +onLoadingFinish: function(event: Event) { + var { onLoad, onLoadEnd } = this.props; + onLoad && onLoad(event); + onLoadEnd && onLoadEnd(event); + this.setState({ + viewState: WebViewBridgeState.IDLE, + }); + this.updateNavigationState(event); +}, }); var RCTWebViewBridge = requireNativeComponent('RCTWebViewBridge', WebViewBridge, {