How do I fix React.js iOS blank screen?
Question
All my React.js apps work perfectly in all desktop browsers I have tested (chrome, edge, IE, firefox). However, when I try to open them on my iphone, either chrome or safari, I am presented with a blank screen.
Below is an example of an app that works on desktop but appears blank on iOS.
<html>
<head>
<meta charset="utf-8">
<title>react test</title>
<script src="js/jquery.min.js"></script>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script>
var h = React.createElement;
$(document).ready(() => {
ReactDOM.render(h('h1', null, 'Hello World!'), document.getElementById('app'));
});
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
What is the solution to this?
2 answers
solution1
0 2018-10-12 18:24:44
You should always put your script in the end of the document, like this
<html>
<head>
<meta charset="utf-8">
<title>react test</title>
</head>
<body>
<div id="app"></div>
<script src="js/jquery.min.js"></script>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script>
var h = React.createElement;
$(document).ready(() => {
ReactDOM.render(h('h1', null, 'Hello World!'), document.getElementById('app'));
});
</script>
</body>
</html>
solution2
0 2018-10-13 17:48:29
I solved this one with a lot of experimentation.
The version of safari on my iphone did not support ES6 arrow functions which I used in my code.
Replacing all arrow functions with function(){} fixed the issue.
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.