如何让 Android 中的 React Native 知道 Highcharts 图表工具提示中的点击事件？

Question

我有一个用 Expo 构建的 React Native 应用程序。在上，我能够将 URL 传递给 Highcharts，以便在单击工具提示时打开 URL：

return(
    <View style={styles.container}>
        <ChartView
            onMessage={m => this.onMessage(m)}
            config={config}
        />
    </View>

这会触发此方法打开 URL:

onMessage = (m) => {
    let data = JSON.parse(m.nativeEvent.data);
    Linking.openURL(data.url)
};

并且 URL 通过全局变量 window.myURL 填充并使用 postMessage():

发送消息

render() {
    let Highcharts = "Highcharts";
    let config ={
        ...
        plotOptions: {
            series: {
                stickyTracking: false,
                point: {
                    events: {
                        click: function(e) {
                            window.postMessage(JSON.stringify({'url': window.myUrl}));
                        }
                    }
                }
            },
        },
        tooltip: {
            useHTML: true,
            formatter: function () {
                window.myUrl = extras.url;
                return `<div class="text">some text</div>`;
            }
    };

这在 iOS（物理和模拟器）上运行良好，但在 Android（既不是物理也不是模拟器）上不起作用。

我遇到了不同的 Github 问题，例如 onMessage not called in native code even though sent from webview( android) and react native html postMessage can not reach to WebView，他们倾向于建议在 window.postMessage() 上使用一些超时。但是，我发现即使这样也行不通：

plotOptions: {
    series: {
        point: {
            events: {
                click: function(e) {
                    setTimeout(function() {
                        console.log('bla');
                        window.postMessage(JSON.stringify({'url': window.myUrl}));
                    }, 200);
                }
            }
        }
    },
},

因为即使 console.log() 也不起作用，所以在我看来 click 事件似乎没有被 Android 捕获。

如何让 Android 知道此事件，以便我可以浏览邮件然后打开 URL？

Answer 1

"click" 事件很好。问题是，RN 核心 <WebView> 对 Android 的实现在 polyfilling window.postMessage() 上存在缺陷。此问题已在 this github issue 中得到很好的讨论。

所以问题的本质似乎是，RN 出于某种原因必须填充本机 window.postMessage，但是覆盖没有及时发生，导致 window.postMessage 仍然对原生的。

在 github 问题中提出的一个解决方案（针对 Android），就是停止使用本机 window.postMessage，直接使用内部接口，即实际的 polyfill 功能.

// in place of `window.postMessage(data)`, use:
window.__REACT_WEB_VIEW_BRIDGE.postMessage(String(data))

不过请注意，这个 API 不是 public，将来可能会发生变化。

如何让 Android 中的 React Native 知道 Highcharts 图表工具提示中的点击事件？

How can I make React Native in Android aware of a click event in a tooltip in a Highcharts chart?

highcharts

react-native

react-native-android

react-highcharts