真的很难在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>
);
}
}
我不知道为什么，但当您将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;"
/>
);
}