如何關閉React組件中的窗口？

這聽起來可笑的簡單，但我無法找到谷歌這方面的任何解決方案。如何關閉React組件中的窗口？

在我的頁面上，我有一個按鈕關閉該頁面本身

<Button onClick={() => window.close()} >Close</Button>

但每次觸發按鈕，我得到了我使用react-native我的移動應用程序的警告

Scripts may close only the windows that were opened by it.

，它連接到keycloak到（通過RN的WebView）開放Facebook的認證頁面，然後，在這之後，keycloak重定向到success頁面（localhost/login/success其中有按鈕關閉該頁面本身。該頁面在next.js下）。連我直接訪問localhost/login/success上的瀏覽器，我無法靠近頁面既不

更新我設法用onNavigationStateChange解決，並檢查navState.url包含success/login或不觸發狀態，並關閉WebView。但我仍然好奇如何關閉窗口React？

來源

2017-10-21 Thai Tran

您可以使用onMessage道具和網頁視圖之間進行通信陣營本土。

被調用函數時webview電話 window.postMessage。設置此屬性將注入 postMessage全球到您的webview，但仍然會調用的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>

來源

2017-10-21 07:07:58 bennygenel

謝謝，這是另一種方式來破解周圍的解決方案，但我還是想知道'怎麼window.close'陣營組件。 +1 –

這似乎是一個黑客，但實際上在反應母語移除'WebView'分量等於'window.close'。因此，例如打開一個'Modal'其中包含了'WebView'然後關閉'Modal'會給你爲'window.close'同樣的效果。 – bennygenel

如何關閉React組件中的窗口？

回答

相關問題