使用渲染WebView反应本机调用类

Question

我必须在App类中调用在另一个ResolveUrl类中声明的方法，该方法为ResolveUrl.get (...)， 问题是ResolveUrl类在内部使用了render方法，该方法包含一个用url初始化的web视图，在web视图中注入了JavaScript代码，并且当onNavigationStateChange接收到在其中设置的信息时，它必须执行某些操作标题然后设置为setState，最后，信息通过诺言返回给App类。

但是它不能很好地工作，因为我不知道如何设置ResolveUrl类。

在App类中声明此类内容之前

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

但是我不喜欢这个设置。

我只想做这样的事情：ResolveUrl.get (...)

链接：Expo

应用程序：

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';
import ResolveUrl from './ResolveUrl';

let url = ['https://oload.stream/embed/eGU2r6teA0c/', ''];

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      url: '',
    };
  }

  componentDidMount() {
    ResolveUrl
      .get(url[0])
      .then(url => {
        this.setState({ url });
      })
      .catch(err => alert('Error: ' + err));
  }

  render = () => (
    <View
      style={{
        paddingTop: 36,
        backgroundColor: '#e86a04',
      }}>
      <Text>Url: {this.state.url}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  /*container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },*/
});

ResolveUrl：

import React, { Component } from 'react';
import { View, WebView, Text } from 'react-native';
import cio from 'cheerio-without-node-native';

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

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

  componentWillUnmount() {
    console.log('Exit');
    this.setState({ urlOpenload: '', isMounted: false });
  }

  Verystream(url) {
    return new Promise(async (resolve, reject) => {
      fetch(url)
        .then(response => response.text())
        .then(r => cio.load(r))
        .then($ => {
          resolve(
            'https://verystream.com/gettoken/' +
              $('p#videolink').text() +
              '?mime=true'
          );
        })
        .catch(error => {
          reject();
          console.error(error);
        });
    });
  }

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

  categorize(url) {
    if (url.includes('openload') || url.includes('oload')) return 'openload';
    if (url.includes('verystream')) return 'verystream';
  }

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

  render() {
    const jsCodeOpenload = `(function(){
      document.title = document.getElementById('DtsBlkVFQx').innerHTML;
      window.location.hash = 0;
    }());`;
    return (
      <View style={{ backgroundColor: '#f4e841', paddingTop: 40}}>
        {this.state.urlOpenload != '' && (
          <WebView
            source={{
              uri: this.state.urlOpenload,
            }}
            onNavigationStateChange={evt => {
              if (evt.title.includes('~')) this.setState({ code: evt.title });
            }}
            injectedJavaScript={jsCodeOpenload}
            javaScriptEnabled
          />
        )}
        <Text>urlOpenload: {this.state.urlOpenload}</Text>
      </View>
    );
  }
}

//const resolveUrl = new ResolveUrl();
export default new ResolveUrl();