Действие отправки в injectedJavascript на Android-устройстве WebView в React Native не работает - PullRequest
Новая
       21

Действие отправки в injectedJavascript на Android-устройстве WebView в React Native не работает

0 голосов
/ 15 ноября 2018

У меня есть 1 HTML, и мне нужно получить все атрибуты src тега изображения. Все работает отлично (iOS, Android Virtual Machine, iOS-устройство), но только Android-устройство, я не могу получить атрибут src !! Пожалуйста, помогите мне! Спасибо !!

My WebView 

render() {
    const { source, style, ...otherProps } = this.props;
    const { realContentHeight } = this.state;
    const html = source.html;
    const number = this.addHeight(html);
    const addHeightMore = number * 220;

    return (
        <View style={{ flex: 1 }}>
            <View 
                style={{

                    paddingHorizontal: 5,
                }}
            >
                <WebView
                    {...otherProps}
                    source={{ 
                        html:`
                             <head></head>
                             <body style="font-size: ${sizeText}; text-align: left; padding: 5">
                                  ${templates[this.props.template](html)}
                             </body>
                            `
                    }}
                    onLoad={this.onLoad.bind(this)}
                    injectedJavaScript={this.injectedJavaScript()}
                    mixedContentMode={'compatibility'}
                    onMessage={this.onMessage.bind(this)}
                    scrollEnabled={false}
                    style={[{ height: Platform.OS === 'ios' ? realContentHeight : realContentHeight < screenHeight ? screenHeight : realContentHeight + addHeightMore}, style]}
                    javaScriptEnabled
                />
            </View>
        </View>
    )
}

injectedJavascript () 

injectedJavaScript() {

    return ` 
        ${this.hackBefore()}

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

        var imgs = [];

        document.querySelectorAll('img:not(.emoji):not(.embedded-img):not(.embedded-btn)').forEach(function (img, index) {
            var src = img.getAttribute('src');
            imgs.push(src);

            img.addEventListener('click', function (event) {
                dispatchAction('openGallery', {
                    index: index,
                });
            });
        });

        dispatchAction('addImages', {
            imgs: imgs,
        });

        ${this.hackAfter()}
    `
}

hackBefore

hackBefore () { вернуть 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 () { console.log('window.postMessage not ready'); window.postMessage(msg); }, 500); } } }

* * HackAfter тысячи двадцать-одина () * * тысяча двадцать-дв 
hackAfter() {
    return Platform.OS === 'ios' ? '})();' : ''
}

OnMessage () 

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

    switch (action) {
    case 'heightCaculated': {
        return this.setState({
        realContentHeight: params.height,
        isRendering: false,
        })
    }
    case 'addImages': {
        this.props.resetImages()
        // Prefetch image
        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
    }
}

перевождь 

   export default connect(null, {
    addImages,
    resetImages,
})(WebViewAutoHeight)

1 Ответ

0 голосов
/ 15 ноября 2018

При запуске приложения на устройстве Android в рабочем режиме необходимо создать HTML-файл в каталоге ресурсов Android - android/app/src/main/assets/index.html

Ваш WebView источник должен затем указать на этот файл, file:///android_asset/index.html. Но только при определенных условиях

Если вы работаете на Android и работаете в Production, источник должен быть file:///android_asset/index.html. Иначе, укажите ваш источник на ваш локальный файл HTML.

Вот пример, я не уверен, как ваш проект структурирован, но вы можете выбрать то, что вам нужно. 

import React from 'react';
import { Platform, WebView } from 'react-native';

import localFile from '../index.html';

const MyWebView extends React.Component {
  isAndroid = () => Platform.OS === "android"
  isDev = () => __DEV__
  getSource = () => {
    if(this.isAndroid() && !this.isDev()) {
      return { uri: 'file:///android_asset/index.html' };
    }
    return localFile
  }
  render() {
    <WebView
      source={this.getSource()}
    />
  }
}
...