TL; DR:一个用create-react-app
和yarn 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错误。
如果有人有解决方案或任何想法,将非常感激。
create-react-app设置为从根文件夹中获取资源,根文件夹将是手机文件系统的根目录。我通过在create-react-app应用程序的package.json中添加"homepage": "./"
键值对来解决了这个问题