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

brjng4g3 于 2023-11-18 发布在 React

关注(0)|答案(1)|浏览(92)

我试图将Redly小部件嵌入到React本机应用程序中。嵌入完成，代码与预订事件功能一起工作。然而，我试图侦听小部件发出的事件，没有任何成功。
这就是我的组件代码的样子。我试图从injectedJavascript prop和静态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

来源：https://stackoverflow.com/questions/77303066/how-can-i-run-code-when-event-is-scheduled-in-embedded-calendly-widget-in-react