onMessage android Webview React Native не работает на физическом устройстве (ios и виртуальный Android работают!) - PullRequest
Новая
       14

onMessage android Webview React Native не работает на физическом устройстве (ios и виртуальный Android работают!)

0 голосов
/ 25 января 2019

Мое веб-представление содержит (embed, code, ...), так как я использовал onMessage и injectedJavascript, я пробую консольное событие в onMessage в ios, и витальный андроид возвращает результаты, только физический андроид не возвращает результат, пожалуйста, дайте мне ключевое слово и почему?? Большое спасибо! 

<WebView
    {...otherProps}
    javaScriptEnable={true}
    domStorageEnabled={true}
    mixedContentMode={'compatibility'}
    source={{ html: templates[this.props.template]({html, fontSizeContent, fontSizeContentPre, highlightThemes, enableNightMode}) }}
    onLoad={this.onLoad.bind(this)}
    injectedJavaScript={this.injectedJavaScript()}
    onMessage={this.onMessage.bind(this)}
    scrollEnabled={false}
    style={{
            height: Math.max(realContentHeight, minHeight), 
            backgroundColor: enableNightMode ? COLORS.COLOR_NIGHT_MODE : COLORS.COLOR_UN_NIGHT_MODE
          }}
    />

hackBefore() {
    return Platform.OS === 'ios' ?
    `
        (function(){
            var originalPostMessage = window.postMessage;
            var patchedPostMessage = function(message, targetOrigin, transfer) {
                originalPostMessage(message, targetOrigin, transfer);
            };
            patchedPostMessage.toString = function() {
                return String(Object.hasOwnProperty).replace('hasOwnProperty', 'postMessage');
            };
            window.postMessage = patchedPostMessage; `
    :
    `
        if (window.postMessage.length !== 1) {
            window.postMessage = function(msg) {
                setTimeout(function () {
                window.postMessage(msg);
                }, 5000);
            }
        }
    `
}

hackAfter() {
    return Platform.OS === 'ios' ? '})();' : ''
}

injectedJavaScript() {
    return ` 
        ${this.hackBefore()}
        NodeList.prototype.forEach = Array.prototype.forEach;

        if (!Element.prototype.matches)
        Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;

        if (!Element.prototype.closest)
        Element.prototype.closest = function(s) {
            var el = this;
            if (!document.documentElement.contains(el)) return null;
            do {
                if (el.matches(s)) return el;
                el = el.parentElement || el.parentNode;
            } while (el !== null && el.nodeType === 1); 
            return null;
        };

        function dispatchAction(action, params) {
            window.postMessage(JSON.stringify({
                action,
                params,
            }));
        };


        ${this.hackAfter()}
    `
};

onMessage(event) {
    console.log('event', event)
    const { action, params } = JSON.parse(event.nativeEvent.data);

    console.log('action', action)
    console.log('params', params)

    switch (action) {
    case 'heightCaculated': {
        return this.setState({
            realContentHeight: params.height,
            isRendering: false,
        });
    };
    case 'addImages': {
        this.props.resetImages();
        params.imgs.map(img => Image.prefetch(img));
        return this.props.addImages(params.imgs);
    };
    case 'openGallery': {
        return navigator.navigate('Gallery', {
            index: params.index,
        })
    };
    default:
        return null;
    };
};
...