提问者:小点点

如何从WebView在react-native中触发动作?


我有一个组件,该组件显示信用卡/CVC/到期表单。

它使用react-native-webview显示在react-native应用程序中。

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

  • 在webview中按下提交<按钮/>后,如何关闭webview并显示成功消息?
  • 如果无法从组件中获取webview提交事件,如何从组件中读取webview中的表单?

共1个答案

匿名用户

在处理web应用程序中的支付iframes时,我通常会遇到这个问题。 我认为解决办法是相同或类似的做法。

检查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时,我看到他们已经在使用它了

希望有帮助