时间戳

首页 > 解决方案 > 如何从我的 WebView 中触发反应原生的动作？

javascript - 如何从我的 WebView 中触发反应原生的动作？

问题描述

我有一个组件<PaymentView />，这个组件显示一个信用卡/cvc/到期表格。

它显示在使用react-native-webview.

我必须触发表单事件并在提交时更新视图，提交按钮当前位于 WebView 中。

标签： javascriptreactjsreact-nativewebviewreact-native-webview

解决方案

在处理 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我发现他们已经在使用它

希望能帮助到你

推荐阅读