Question

我使用以下代码来呈现webview：

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加载时自动提交（从代码的反应部分发送一些数据），最后，文件被重定向到特定的url，在那里进行一些处理（在发送数据上），现在，它什么都不返回。因此屏幕显示为空白。

所以，在这一点上，我想关闭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(1, null, 2));
                    /** put your comdition here based here and close webview.
                     Like if(e.url.indexOf("end_url") > -1)
                     Then close webview
                     */
                }}
                source={someHTMLFile}
                ref={(webView) => this.webView = webView}
            />
        </View>
    );
}

Answer 2

关闭WebView基本上等于卸载组件。您可以执行条件渲染来装入和卸载组件。通常的行为是打开一个内部有Modal的{{1}}。完成WebView后，您可以发送消息进行反应，然后关闭模式。这将卸载模态和WebView。

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

WebView调用时调用的函数 webview。设置此属性将注入一个 window.postMessage全球postMessage，但仍会致电预先存在的值webview。

示例

postMessage

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

Answer 3

只需在Webview Checkout组件内部创建此道具即可：

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

如何在反应原生

3 个答案: