当事件在 React Native Web View 的嵌入式 Calendly 小部件中调度时，如何运行代码？-解网

问：

我正在尝试将 calendly 小部件嵌入到 react native 应用程序中。嵌入完成，代码与预订事件功能一起工作。但是，我正在尝试侦听小部件发出的事件，但没有任何成功。

这就是我的组件代码的样子。我正在尝试从 injectedJavascript 道具和我拥有的静态 html 中使用 postMessage 方法，但它在任何时候都不起作用。

import React, { useRef, useState } from "react"
import { StyleSheet } from "react-native"
import { WebView } from "react-native-webview"


function isCalendlyEvent(e) {
    return e.data.event &&
        e.data.event.indexOf("calendly") === 0
}

const BookAppointment = ({ navigation }) => {
    const webViewRef = useRef(null)
    const source = {
        html: `
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        </head>
    <div class="calendly-inline-widget" style="min-width:320px;height:100%;" data-auto-load="false" id="myHeader">
    </div>
    <script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>
    <script>
                  Calendly.initInlineWidget({
                  "parentElement": document.getElementById('myHeader'),
                    "url": 'https://calendly.com/taranathchimbili/doctor-appointment',
                    "prefill": {
                      "name": "John Doe",
                      "email": "[email protected]",
                    }
                  });
                  
                  window.ReactNativeWebView.postMessage({"some": "something"});
                  window.addEventListener("message", function(event) {
                  window.ReactNativeWebView.postMessage(event);
                  });
                  true;
    </script>`
    }
    const onMessage = (event) => {
        console.log("event", event)
    }
    
    return (
        <WebView
                injectedJavaScriptForMainFrameOnly={true}
                ref={(ref) => (webViewRef.current = ref)}
                originWhitelist={["*"]}
                source={source}
                startInLoadingState={true}
                renderLoading={() => <Loading text={"Loading..."} />}
                onMessage={onMessage}
                injectedJavaScript='
                window.addEventListener("message", function(event) {
              window.ReactNativeWebView.postMessage(event);
           });
          true;
         '
            />
    )

export default BookAppointment

这些是参考链接 -

reactjs postmessage react-native-webview calendly

当事件在 React Native Web View 的嵌入式 Calendly 小部件中调度时，如何运行代码？

How can I run code when event is scheduled in embedded Calendly widget in React Native Web View?

评论