Phonegap + ReactJS 白屏

Question

TL;DR: 使用 create-react-app 和 yarn build 构建的全新应用程序，然后复制到新的 Phonegap 项目的 /www 目录中，结果为白色通过 phonegap serve.

在 Phonegap Developer 应用程序中加载应用程序时的屏幕

我开发 ReactJS 应用已经有一段时间了，目前正在将其移植到 Phonegap 以创建 Android 和 iOS 的混合移动应用。

我已经完成了 Phonegap 设置，并在 Phonegap Developer 应用程序中成功获得了他们的演示项目（由运行ning phonegap create 生成）运行ning。

但是，当我通过 create-react-app（或使用我现有的应用程序）创建一个新的 React 应用程序时，运行 yarn build 创建一个生产版本，然后复制 /将 Phonegap 构建到 /www 中，运行在 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

使用服务器运行ning 我可以通过直接在 Chrome 中导航到它的 IP 来成功访问应用程序 Android，但仍然试图在 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 设置为从根文件夹获取资源，该文件夹将成为 phone 文件系统的根目录。我通过添加解决了问题 "homepage": "./" create-react-app 应用 package.json 中的键值对

Phonegap + ReactJS 白屏

Phonegap + ReactJS White Screen

cordova

reactjs

phonegap