Phonegap + белый экран ReactJS

TL;DR: Новое приложение, созданное с помощью create-react-app и yarn build, а затем скопированное в каталог /www нового проекта Phonegap, приводит к появлению белого экрана при загрузке приложения в приложении Phonegap Developer через phonegap serve.


Я уже некоторое время работаю над приложением ReactJS и в настоящее время занимаюсь его переносом на Phonegap для создания гибридных мобильных приложений для Android и iOS.

Я прошел настройку Phonegap и успешно запустил их демонстрационный проект (который создается путем запуска phonegap create) в приложении Phonegap Developer.

Однако, когда я создаю новое приложение для реагирования через create-react-app (или использую свое существующее приложение), запускаю yarn build для создания рабочей сборки, затем копирую содержимое /build в /www для Phonegap, запуск приложения в приложении Phonegap Developer приводит к белый экран.

Вывод phonegap serve, когда я открываю приложение в приложении Phonegap Developer, выглядит следующим образом:

[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

При работающем сервере я могу успешно получить доступ к приложению, перейдя к его IP-адресу непосредственно в Chrome для 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.

Если у кого-то есть решение или какие-либо идеи, это будет очень признательно.


person saricden    schedule 24.08.2018    source источник


Ответы (1)


create-react-app настроен на извлечение ресурсов из корневой папки, которая будет корнем файловой системы телефона. Я исправил проблему, добавив пару значений ключа "homepage": "./" в package.json приложения create-react-app.

person sudazzle    schedule 25.03.2019