0

React Native WebView 没有加载 react js 站点（内置 react js）？

React 本机 WebView 没有加载反应站点（内置反应）？

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/' }}
            />
        );
    }
}

4

1 回答 1

0

尝试这个：-

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;
于 2021-04-26T15:21:51.047 回答