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

Question

我有一个使用Expo构建的React Native应用程序。在How can I add links in a Highcharts tooltip that will open on mobile's browser?上，我能够将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)和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核心的Android的<WebView>实现在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并不公开，未来可能会有所变化。