Question

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（或使用现有的应用程序）创建新的react应用程序时，运行yarn build以创建生产版本，然后将/ build的内容复制到/ www中以用于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

在服务器运行的情况下，我可以直接在Android版Chrome浏览器中导航至其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错误。

如果有人有解决方案或任何想法，将不胜感激。

Answer 1

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

Phonegap + ReactJS白屏

1 个答案: