React Native Webview 不加载任何 url（显示空白页）答案

【问题标题】：React Native Webview not loading any url (Shows Blank Page)React Native Webview 不加载任何 url（显示空白页）
【发布时间】：2020-06-05 16:32:29
【问题描述】：

真的很难在 React Native 中通过 WebView 显示 url，我尝试了很多类似问题的建议，但目前还没有取得进展。

这是一个从 Shopify 商店提取数据的销售应用程序，最大的问题是结帐页面是通过 WebView 呈现的，因为我无法使其正常工作，结帐页面只是空白。我也尝试过自己的外部链接，但我也没有任何成功。

我的代码如下：

/** @format */

import React, { PureComponent } from "react";
import { WebView, View } from "react-native";
import { Spinkit } from "@components";
import { Styles } from "@common";

const { width, scale } = Styles.window;

export default class WebViewUrl extends PureComponent {
  _renderLoading = () => {
    return (
      <Spinkit
        style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
      />
    );
  };

  getHTML = (htmlString) => {
    return `<html><head><style type="text/css">
            body {
              margin: 8;
              padding: 0;
              font: 14px arial, sans-serif;
              background: white;
              width: ${(width - 16) * scale}
            }
            p {
              width: ${(width - 16) * scale}
            }
            a, h1, h2, h3, li {
              font: 14px arial, sans-serif !important;
            }
            img {
              height: auto;
              width: ${(width - 16) * scale}
              }
      </style></head><body>${htmlString}</body>`;
  };

  render() {
    const { uri, htmlString } = this.props;
    const source = htmlString ? { html: this.getHTML(htmlString) } : { uri };

    return (
      <View style={{ backgroundColor: "#fff", flex: 1 }}>
        <WebView
          {...this.props}
          startInLoadingState
          source={source}
          renderLoading={this._renderLoading}
          injectedJavaScript="document.body.scrollHeight;"
        />
      </View>
    );
  }
}

【问题讨论】：

标签： javascript react-native

【解决方案1】：

我不知道为什么，但是当您将 WebView 放入 View 时，它不会显示任何内容。你能把你的渲染方法改成这样吗：

render() {
const { uri, htmlString } = this.props;
const source = htmlString ? { html: this.getHTML(htmlString) } : { uri };

return (
    <WebView
      {...this.props}
      startInLoadingState
      source={source}
      renderLoading={this._renderLoading}
      injectedJavaScript="document.body.scrollHeight;"
    />
  );
}

【讨论】：