在react native中完成工作后如何关闭webview

Question

我正在使用以下代码来呈现网络视图：

const someHTMLFile = require('./somefile.html')
render() {
  return (
     <View style={{flex: 1}}>
      <WebView
          style={{flex: 1}}
          source={someHTMLFile}
          ref={( webView ) => this.webView = webView}
      />      
    </View>
  );
}

在这个 html 文件中，有一个在 webview 加载时自动提交的表单（一些数据从代码的 reactnative 部分发送），最后，文件被重定向到特定的 url，其中完成了一些处理（在发送数据上），而现在，它 returns 什么都没有。所以屏幕变黑了。

所以，在这一点上，我想关闭 webview 并将用户带回我的 reactnative 应用程序。那么，我该怎么做呢？有什么建议吗？

Answer 1

Webview 具有 onNavigationStateChange 属性，这将为 webview 加载开始或结束时提供基础。

因此，您可以使用这些道具来检查当前状态或 webview 的当前 URL，并设置一些条件来关闭 webview。

render() {
    return (
        <View style={{flex: 1}}>
            <WebView
                style={{flex: 1}}
                onNavigationStateChange={(e) => {
                    console.warn("current state is ", JSON.stringify(e, null, 2));
                    /** put your comdition here based here and close webview.
                     Like if(e.url.indexOf("end_url") > -1)
                     Then close webview
                     */
                }}
                source={someHTMLFile}
                onLoadEnd={()=>{
                /* add you work that you want to do after loading is done. */
                }}
                ref={(webView) => this.webView = webView}
            />
        </View>
    );
}

Answer 2

关闭WebView基本上等于卸载组件。您可以进行条件渲染来挂载和卸载组件。通常的行为是打开一个 Modal，里面有一个 WebView。完成 WebView 后，您可以发送一条消息进行反应，然后关闭模式。这将卸载模式和 WebView.

您可以使用 onMessage prop 在 WebView 和 React-Native 之间进行通信。

A function that is invoked when the webview calls window.postMessage. Setting this property will inject a postMessage global into your webview, but will still call pre-existing values of postMessage.

例子

_onMessage = (message) => {
   console.log(message);
}

render() {
  return (<WebView ref={(ref) => { this.webView = ref; }} onMessage={this._onMessage} ..otherProps />);
}

// In your webview inject this code

<script>
  window.postMessage("Sending data from WebView");
</script>

Answer 3

只需在 Webview Checkout 组件中制作此道具即可：

<WebView    onMessage={event => event.nativeEvent.data === 'WINDOW_CLOSED' ? onClose() : onPaymentSuccess(event.nativeEvent.data)} />

在react native中完成工作后如何关闭webview

How to close webview after the work is done in react native

android

android-webview

reactjs

react-native