电容在Android Studio中显示React应用程序的空白屏幕

Question

我已经尝试在本地设置下面的React应用程序，并且这正常工作，但是，当我尝试将电容器安装到这些React应用程序中并从Android Studio执行它时，该应用程序会打开一个空白屏幕。

https://github.com/aditya-sridhar/simple-reactjs-app

https://github.com/arnab-datta/counter-app

添加电容到React App并在Android Studio上运行的步骤如下：

1. 从GitHub克隆/下载应用程序
2. 进行npm安装
3. 本地启动应用程序以检查应用程序是否可以从浏览器中工作
4. 关闭应用程序
5. 安装npm install @capacitor/core
6. 安装npm install @capacitor/cli --save-dev
7. 使用npx cap init初始化Capacitor，并继续使用默认值
8. 安装npm install @capacitor/android
9. 运行npm run build
10. 使用npx cap add android添加Android平台
11. 使用npx cap run android运行Android平台

注意：在执行npx cap run android时，我遇到了一个错误，并在生成的Android文件夹中添加了local.properties。

屏幕图像如下

- user1843883

---

你能发布一下错误信息吗？ - johnborges

我没有在任何地方看到错误信息。 - user1843883

似乎您的网页内容没有同步。请尝试使用 npx cap sync 命令进行同步。 - johnborges

让我试一试，然后回复您。 - user1843883

@johnborges：我尝试了npx cap sync，但它没有起作用。我仍然看到空白屏幕，应用程序没有加载。 - user1843883

你在android/app/src/main/assets目录下看到任何文件了吗？ - johnborges

Answer 1

经过大量调查和阅读各种论坛，我发现以下解决方案适用于我的iOS和Android。

在 capacitor.config.ts 文件的 server 部分下增加以下主机名属性。将主机名设置为 127.0.0.1，而不是将 URL 属性设置为 http://localhost:8100 或 http://127.0.0.1:8100。

server: {
    hostname: '127.0.0.1',
    cleartext: true,
    allowNavigation: ['*'],
  }

然后运行 npx cap sync

然后对我来说，ionic cap run android/ios 运行良好。

要使用实时重新加载进行调试，只需运行 ionic cap run -l android/ios --external

希望这可以帮助到您

- Koti