关于React本机应用程序的站点显示

Question

网站在网站上显示

当前的实践中，我正在使用React-native创建一个浏览器应用程序。 将显示Google和其他URL。 但是，未显示该特定站点，它变为白屏。

※ 地址为https，并且该网站已在PC或真实计算机的Google Chrome上正确显示。

这是否意味着网站的SSL存在缺陷？

请告诉我。

我们正在以下代码中使用source = {{uri: 'https://www.google.com/'}}进行网站指定。

##App.js
    /**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
const WEBVIEW_REF = "WEBVIEW_REF";
import React, { Component } from "react";
import { WebView } from "react-native";
import {
  AppRegistry,
  Platform,
  StyleSheet,
  Text,
  View,
  Button,
  Image
} from "react-native";
const instructions = Platform.select({
  ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
  android:
    "Double tap R on your keyboard to reload,\n" +
    "Shake or press menu button for dev menu"
});
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      canGoBack: false,
      canGoForward: false,
      loading: false
    };
  }
  render() {
    return (
      <View style={{ flex: 1 }}>
        <View style={{ backgroundColor: "#FE9A2E", flex: 0.15 }}>
          <Image
            source={require("./header.png")}
            style={{ alignSelf: "center" }}
          />
        </View>
        <View style={{ flex: 0.8 }}>
          <WebView
            ref={WEBVIEW_REF}
            source={{ uri: "https://www.google.co.jp/" }}
            onNavigationStateChange={this.onNavigationStateChange.bind(this)}
          />
        </View>
        <View style={{ alignSelf: "center", flex: 0.08, flexDirection: "row" }}>
          <View style={styles.buttonContainer}>
            <Button
              onPress={this.onBack.bind(this)}
              title="←"
              color="#FE9A2E"
            />
          </View>
          <View style={styles.buttonContainer}>
            <Button
              onPress={this.onReload.bind(this)}
              title="↺"
              color="#FE9A2E"
            />
          </View>
          <View style={styles.buttonContainer}>
            <Button
              onPress={this.onForward.bind(this)}
              title="→"
              color="#FE9A2E"
            />
          </View>
        </View>
      </View>
    );
  }
  onBack() {
    this.refs[WEBVIEW_REF].goBack();
  }

  onForward() {
    this.refs[WEBVIEW_REF].goForward();
  }

  onReload() {
    this.refs[WEBVIEW_REF].reload();
  }

  onNavigationStateChange(navState) {
    this.setState({
      canGoBack: navState.canGoBack,
      canGoForward: navState.canGoForward,
      loading: navState.loading
    });
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10
  },
  instructions: {
    textAlign: "center",
    color: "#333333",
    marginBottom: 5
  },
  buttonContainer: {
    width: 100,
    margin: 6
  }
});
AppRegistry.registerComponent("App", () => App);

Answer 1

您应该为WebView标记指定一个width高度样式。 试试这个，让我知道。

在您的webView标签style={styles.webViewStyles}添加此style={styles.webViewStyles} ，然后在StyleSheet中添加以下样式。 webViewStyles:{height: 100, width: 100},在样式表中添加样式之前webViewStyles:{height: 100, width: 100},不要忘记逗号。