Phonegap + ReactJS白色屏幕

问题描述 投票:0回答:1

TL; DR:一个用create-react-appyarn build构建的新应用程序,然后复制到一个新的Phonegap项目的/ www目录,当通过phonegap serve在Phonegap Developer应用程序中加载应用程序时会产生白屏。


我已经在ReactJS应用程序上工作了一段时间,目前正在将其移植到Phonegap以创建适用于Android和iOS的混合移动应用程序。

我已经完成了Phonegap设置,并成功获得了在Phonegap Developer应用程序中运行的演示项目(通过运行phonegap create生成)。

但是,当我通过create-react-app(或使用我现有的应用程序)创建一个新的反应应用程序时,运行yarn build来创建一个生产版本,然后将/ build的内容复制到/ www for Phonegap,在Phonegap Developer应用程序中运行该应用程序一个白色的屏幕。

我在Phonegap Developer应用程序中打开应用程序时phonegap serve的输出如下:

[phonegap] [console.warn] Content Security Policy has been added: <meta http-equiv="Content-Security-Policy" content="default-src * gap: ws: https://ssl.gstatic.com;img-src * 'self' data: content:;style-src 'self' 'unsafe-inline' data: blob:;script-src * 'unsafe-inline' 'unsafe-eval' data: blob:;">
[phonegap] 200 /__api__/appzip

在服务器运行的情况下,我可以通过在Chrome for Android中直接导航到其IP来成功访问该应用,但尝试在Phonegap Developer应用中加载它仍会导致白屏。

phonegap serve在浏览器中加载应用程序时的输出如下:

[phonegap] 200 /
[phonegap] 200 /static/css/main.7b1984ad.css
[phonegap] 200 /socket.io/socket.io.js
[phonegap] 200 /static/js/main.48127ccb.js
[phonegap] 200 /static/css/main.7b1984ad.css.map
[phonegap] 200 /img/nav-logo.png
[phonegap] 200 /img/welcome-logo.png
[phonegap] 200 /socket.io/?EIO=3&transport=polling&t=MLheCGT
[phonegap] 200 /socket.io/?EIO=3&transport=polling&t=MLheCOR&sid=Q1drCs6tvCUbSX_FAAAA
[phonegap] 200 /socket.io/?EIO=3&transport=polling&t=MLheCSj&sid=Q1drCs6tvCUbSX_FAAAA
[phonegap] 200 /static/js/main.48127ccb.js.map

我还确认在应用加载时没有抛出JS错误。

如果有人有解决方案或任何想法,将非常感激。

reactjs cordova phonegap
1个回答
0
投票

create-react-app设置为从根文件夹中获取资源,根文件夹将是手机文件系统的根目录。我通过在create-react-app应用程序的package.json中添加"homepage": "./"键值对来解决了这个问题

© www.soinside.com 2019 - 2024. All rights reserved.