React原生WebView没有加载React js站点(内置于React jss中)

Question

React原生WebView没有加载React js站点(内置于React js中(？

React原生WebView没有加载React站点(内置于React(？

import React, { Component } from 'react';
import { View, Text, ActivityIndicator } from 'react-native';
import Configuration from '../config/configuration';
import { WebView } from 'react-native-webview';
import { lightGreyColor, redColor } from '../constants';
export default class PaymentWebView extends Component {
constructor(props) {
super(props);
this.config = new Configuration();
this.state = {
};
}
render() {
return (
<WebView
style={{ width: '100%',marginTop: 20, background: redColor }}
javaScriptEnabled={true}
domStorageEnabled={true}
allowsInlineMediaPlayback={true}
// renderLoading={<ActivityIndicator />}
startInLoadingState={true}
scalesPageToFit={true}
source={{ uri: 'https://autodeals-web.firebaseapp.com/' }}
/>
);
}
}

Answer 1

试试这个：-

import React, {Component} from 'react';
import {
BackHandler,
Platform,
ActivityIndicator,
StyleSheet,
} from 'react-native';
import {WebView} from 'react-native-webview';
class HelpWebView extends Component {
webView = {
canGoBack: false,
ref: null,
};
loader = {
show: true,
};
onAndroidBackPress = () => {
if (this.webView.canGoBack && this.webView.ref) {
this.webView.ref.goBack();
return true;
}
return false;
};
componentWillMount() {
if (Platform.OS === 'android') {
BackHandler.addEventListener(
'hardwareBackPress',
this.onAndroidBackPress,
);
} else {
BackHandler.addEventListener('hardwareBackPress', this.backHandler);
}
}
componentWillUnmount() {
if (Platform.OS === 'android') {
BackHandler.removeEventListener('hardwareBackPress');
} else {
BackHandler.removeEventListener('hardwareBackPress', this.backHandler);
}
}
backHandler = () => {
this.webView.ref.goBack();
return true;
};
ActivityIndicatorLoadingView() {
return (
<ActivityIndicator
color="#009688"
size="large"
style={styles.ActivityIndicatorStyle}
/>
);
}
render() {
return (
<WebView
style={styles.WebViewStyle}
onLoadEnd={() => {
this.loader.show = false;
}}
injectedJavaScript={`const meta = document.createElement('meta'); meta.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=0'); meta.setAttribute('name', 'viewport'); document.getElementsByTagName('head')[0].appendChild(meta); `}
scalesPageToFit={true}
automaticallyAdjustContentInsets={true}
scrollEnabled={true}
javaScriptEnabled={true}
domStorageEnabled={true}
renderLoading={this.ActivityIndicatorLoadingView}
startInLoadingState={true}
bounces={false}
source={{uri: 'https://autodeals-web.firebaseapp.com/'}}
ref={(webView) => {
this.webView.ref = webView;
}}
sharedCookiesEnabled={true}
javaScriptEnabledAndroid={true}
userAgent="Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2228.0 Safari/537.36"
/>
);
}
}
const styles = StyleSheet.create({
WebViewStyle: {
justifyContent: 'center',
alignItems: 'center',
marginTop: Platform.OS === 'ios' ? 0 : 0,
width: '100%',
height: '100%',
resizeMode: 'cover',
flex: 1,
},
ActivityIndicatorStyle: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
alignItems: 'center',
justifyContent: 'center',
},
});
export default HelpWebView;