Как я могу сообщить React Native в Android о событии щелчка во всплывающей подсказке в диаграмме Highcharts? - PullRequest
Новая
       38

Как я могу сообщить React Native в Android о событии щелчка во всплывающей подсказке в диаграмме Highcharts?

1 голос
/ 09 апреля 2019

У меня есть приложение React Native, созданное с помощью Expo.На Как добавить ссылки во всплывающую подсказку Highcharts, которая открывается в браузере мобильного телефона? Мне удалось передать 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 не вызывается в собственном коде, даже если отправлено из 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-адрес?

1 Ответ

3 голосов
/ 18 апреля 2019

Событие "click" в порядке. Проблема в том, что <WebView> реализация ядра RN для Android имеет недостатки при полифиллинге window.postMessage(). Эта проблема хорошо обсуждалась в этом выпуске github .

Так что, похоже, природа проблемы заключается в том, что RN по какой-то причине должен заполнить нативный window.postMessage, но переопределение не было выполнено своевременно, из-за чего window.postMessage все еще были сделаны вызовы нативному.

Одним из решений (для Android), предложенным в этой проблеме github, является просто прекращение использования собственного window.postMessage и непосредственное использование внутреннего интерфейса, который фактически является функцией полизаполнения. 

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

Правда, этот API не является общедоступным и может быть изменен в будущем.

...