我必须在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();