React Native Webview 未加载任何 url（显示空白页面）

Question

真的很难在 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>
    );
  }
}

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

React Native Webview 未加载任何 url（显示空白页面）

问题描述

1 个解决方案

解决方案1
0 2020-02-21 10:58:19

React Native Webview 未加载任何 url（显示空白页面）

问题描述

1 个解决方案

解决方案1 0 2020-02-21 10:58:19

解决方案1
0 2020-02-21 10:58:19