Реагировать на собственный модуль, содержащий веб-представление, переписать его в виде библиотеки - PullRequest
Новая
       38

Реагировать на собственный модуль, содержащий веб-представление, переписать его в виде библиотеки

0 голосов
/ 07 апреля 2019

У меня есть модуль, в котором он содержит веб-просмотр, внутри которого мне нужно ввести какой-нибудь код JavaScript для получения информации с веб-страницы.

следующий модуль Я хотел бы написать его так, как если бы это была библиотека, но у меня есть некоторые сомнения относительно того, возможно ли это сделать.

Для вызова модуля я делаю это: 

import ResolveUrl from './ResolveUrl';

export default class App extends React.Component {
  componentDidMount() {
    this.resolveUrl
      .get('openload', 'https://oload.stream/embed/eGU2r6teA0c/')
      .then(url => {
        console.log(url);
      })
      .catch(err => alert('error: ' + err));
  }

  render = () => (
    <View>
      <ResolveUrl
        ref={r => (this.resolveUrl = r)}
        style={{ width: 0, height: 0, backgroundColor: '#000' }}
      />
    </View>
  );
}

Я хотел бы удалить эту часть из кода: 

<ResolveUrl
            ref={r => (this.resolveUrl = r)}
            style={{ width: 0, height: 0, backgroundColor: '#000' }}
          />

Кодовый модуль: 

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

export default class ResolveUrl extends Component {
  constructor() {
    super();
    this.state = {
      urlOpenload: '',
      code: '',
      isMounted: false,
    };
  }

  componentDidMount() {
    this.setState({ isMounted: true });
  }
  componentWillUnmount() {
    this.setState({ isMounted: false });
  }

  Openload(url) {
    return new Promise(async (resolve, reject) => {
      setTimeout(() => {
        if (this.state.isMounted) {
          this.setState({ urlOpenload: url });
          setInterval(() => {
            if (this.state.code != '')
              resolve('https://openload.co/stream' + this.state.code);
          }, 5000);
        }
      }, 1000);
    });
  }

  get(type, url) {
    type = type.toLowerCase();
    return new Promise(async (resolve, reject) => {
      switch (type) {
        case 'openload':
          resolve(this.Openload(url));
          break;
      }
    });
  }

  render() {
    const jsCodeOpenload = `
        (function ready() {
          function whenRNPostMessageReady(cb) {
            if (window.postMessage.length === 1) cb();
            else setTimeout(function() { whenRNPostMessageReady(cb) }, 100);
          }
          whenRNPostMessageReady(function() {
            window.postMessage(document.getElementById('lqEH1').innerHTML);
          });
        })();`;
    return (
      <View>
        {this.state.urlOpenload != '' && (
          <WebView
            source={{
              uri: this.state.urlOpenload,
            }}
            onMessage={evt => {
              alert(evt.nativeEvent.data)
              this.setState({ code: evt.nativeEvent.data });
            }}
            injectedJavaScript={jsCodeOpenload}
            javaScriptEnabled
            style={{ flex: 1 }}
          />
        )}
      </View>
    );
  }
}
...