如何在Highcharts图表的工具提示中使Android中的React Native知道单击事件? [英] How can I make React Native in Android aware of a click event in a tooltip in a Highcharts chart?

问题描述

我有一个用Expo构建的React Native应用程序.在如何在Highcharts工具提示中添加链接，该提示将在移动设备的浏览器上打开?我能够将URL传递给Highcharts这样，当点击工具提示时，就会打开该网址:

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)
};

然后通过全局变量window.myURL填充URL，并使用 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并未在本机代码中调用从webview(android)和发送响应的本机html postMessage无法发送到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?

解决方案

"click"事件很好.问题在于，RN core的<WebView>用于Android的实现在填充window.postMessage()方面存在缺陷.这个问题已经在这个github问题中进行了很好的讨论.

所以看来问题的本质是，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不是公开的，将来可能会更改.

I have a React Native application built with Expo. On How can I add links in a Highcharts tooltip that will open on mobile's browser? I was able to pass a URL to Highcharts so that when a tooltip is clicked, that URL is opened:

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

This triggers this method to open the URL:

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

And the URL gets populated through a global variable window.myURL and sending the message with 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>`;
            }
    };

This works well on iOS (both physical and emulator), but does not on Android (neither physical nor emulator).

I have gone through different Github issues such as onMessage not called in native code even though sent from webview( android) and react native html postMessage can not reach to WebView and they tend to suggest using some timeout on window.postMessage(). However, I see that even this does not work:

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

Since even console.log() does not work, it looks to me as if the click event is not being caught by Android.

How can I make Android aware of this event so that I can go through the message and then open the URL?

解决方案

The "click" event is fine. Problem is that, RN core's <WebView> implementation for Android is flawed at polyfilling window.postMessage(). This issue has been well discussed in this github issue.

So it seems the nature of problem, is RN has to polyfill the native window.postMessage for some reason, but the override didn't take place timely, causing window.postMessage calls still made to the native one.

One solution (for Android) proposed in that github issue, is simply stop using the native window.postMessage, and directly use the internal interface, which is the actual polyfill function.

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

One heads-up though, this API is not public and might be subject to change in future.

这篇关于如何在Highcharts图表的工具提示中使Android中的React Native知道单击事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！