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

我正在使用以下代码渲染webview：

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

const someHTMLFile=require（'./somefile.html'）
render（）{
返回(
this.webView=webView}
/>      
);
}

在这个html文件中，有一个表单在webview加载时自动提交（从代码的本机部分发送一些数据），最后，该文件被重定向到一个特定的url，在那里完成了一些处理（在发送数据上），现在，它什么也不返回。所以屏幕变成空白

---

因此，此时，我想关闭webview并将用户带回我的reactnative应用程序。。那么，我该怎么做呢？有什么建议吗？

WebVIEW有一个导航状态改变工具，它将为WebVIEW加载启动或结束提供基础。p> 因此，您可以使用这些道具来检查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>
    );
}

render（）{
返回(
{
warn（“当前状态为”，JSON.stringify（e，null，2））；
/**将您的条件放在此处并关闭webview。
比如if（e.url.indexOf（“end_url”）>-1）
然后关闭webview
*/
}}
source={someHTMLFile}
onLoadEnd={（）=>{
/*添加加载完成后要执行的工作*/
}}
ref={（webView）=>this.webView=webView}
/>
);
}

关闭

WebView

基本上等于卸载组件。可以执行条件渲染以装载和卸载组件。通常的行为是打开一个

Modal

，其中包含

WebView

。使用

WebView

后，您可以发送一条消息进行响应，然后关闭模式。这将卸载模态视图和

WebView

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

当

webview

调用

window.postMessage

。设置此属性将注入

postMessage

global进入您的

webview

，但仍将调用

postMessage

的预先存在值

示例

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

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

\u onMessage=（message）=>{
控制台日志（消息）；
}
render（）{
返回（{this.webView=ref；}}onMessage={this.\u onMessage}..otherProps/>）；
}

---

//在webview中插入此代码
window.postMessage（“从WebView发送数据”）；

只需在Webview签出组件中制作以下道具：

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

event.nativeEvent.data==='WINDOW\u CLOSED'？onClose（）：onPaymentSuccess（event.nativeEvent.data）}/>

您好，我仍然面临这个问题。一旦启动重定向，状态就会更改。我想知道重定向请求何时完成。那么也有办法吗？好的，那么您可以使用webview的onLoadEnd或onLoad道具，即onLoad={（event）=>{Console.log（evebnt.nativeEvent）}}这可以帮助您，因为它在加载完整页面后运行

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