如何從我的 WebView 中觸發回 react-native 的動作？

Question

我有一個組件<PaymentView /> ，該組件顯示一個信用卡/cvc/到期表單。

它使用react-native-webview顯示在 react-native 應用程序中。

我必須觸發表單事件並在提交時更新視圖，提交按鈕當前位於 WebView 內。

從 webview 中按下提交<Button />后，如何關閉 WebView 並顯示成功消息？
如果我無法從我的組件中獲取 webview 提交事件，我如何從我的組件中讀取 webview 中的表單？

Answer 1

在 web 應用程序中處理支付 iframe 時，我通常會遇到這個問題。 我認為解決方案是相同或相似的方法。

檢查postMessage API。

我們通常做的是在 iFrame（我猜是你的 webView）端發出一個事件。 通常是一個導航事件，然后我們在我們的應用程序中全局監聽該事件，例如：

    <script>

        var defaultResponse = {
            status: 0,
            code: '',
            message: ''
        }

        function queryParamsToObject(search = '') {
            return search ? JSON.parse('{"' + search.replace(/&/g, '","').replace(/=/g, '":"') + '"}') : ''
        }

        function getResponseObject() {
            return queryParamsToObject(decodeURI(location.search).substring(1))
        }

        var response = getResponseObject()

        console.log('window:child', window.parent, response)
        try {
            window.parent.postMessage(response, '*')
        } catch (e) {
            console.log('window:child:send:error', e)
        }

    </script>

在快速搜索react-native-webview時，我發現他們已經在使用它

希望能幫助到你

Answer 2

看看這個

  render() {
const html = `
  <html>
  <head></head>
  <body>
    <script>
      setTimeout(function () {
        window.ReactNativeWebView.postMessage("Hello!")
      }, 2000)
    </script>
  </body>
  </html>
`;

return (
  <View style={{ flex: 1 }}>
    <WebView
      source={{ html }}
      onMessage={event => {
        alert(event.nativeEvent.data);
      }}
    />
  </View>
);

} }

如何從我的 WebView 中觸發回 react-native 的動作？

問題描述

2 個解決方案

解決方案1
0 2020-06-12 14:27:28

解決方案2
0 2021-02-28 02:08:04

如何從我的 WebView 中觸發回 react-native 的動作？

問題描述

2 個解決方案

解決方案1 0 2020-06-12 14:27:28

解決方案2 0 2021-02-28 02:08:04

解決方案1
0 2020-06-12 14:27:28

解決方案2
0 2021-02-28 02:08:04