React Native Webview not loading any url (Shows Blank Page)
Question
Really struggling to get a url to display via WebView in React Native, Ive tried a lot of suggestions from similar questions but not progress has been made as of yet.
This is a sales app that pulls data from a Shopify store and the biggest issue is that the checkout page is rendered via WebView and because I'm can't get it to work properly the checkout pages is just blank. I have also tried external links on their own and I'm also not having any success.
My code is as follows:
/** @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>
);
}
}
1 answers
solution1
0 2020-02-21 10:58:19
I don't know why but when you put WebView in View it doesn't show anything. Can you change your render method to this please:
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;"
/>
);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.