【问题标题】:React Native white blank screen issueReact Native 白色黑屏问题
【发布时间】:2018-08-06 10:32:43
【问题描述】:

在 android 的情况下,在物理设备上运行应用程序时总是出现白色空白屏幕。使用react-native-navigation无法检测到bug请帮忙!

我创建了一个新的react-native 项目并将react-native-navigation 库集成到其中,当我通过运行命令yarn run android 在物理设备中运行应用程序时,它运行但在android 中显示空白屏幕。一旦它成功运行,但现在它不会。

【问题讨论】:

  • 请提供更多详细信息/代码以帮助社区了解您的问题。

标签: react-native


【解决方案1】:

在单独的终端中运行 react-native start 然后运行 ​​react-native run-android。

【讨论】:

  • 第一次运行 react-native run-android 我得到了空白屏幕。在第二次运行时,它起作用了。很奇怪。
【解决方案2】:

我最近遇到了两种白屏问题

1.总是显示白屏(由于捆绑..) 解决方案是

react-native start 

然后

react-native run-android 

2.它在特定的几秒钟内显示白屏,或者在正常工作的应用程序中突然总是显示白屏

由于应用缓存或流量

解决方案是

Androidmanifest.java

android:usesCleartextTraffic="true"

【讨论】:

  • 嘿,你救了我的一天!
【解决方案3】:

如果Debug JS Remotely 开启,那么我们也会看到空白屏幕。我最近遇到了这个问题。所以检查你是否已经在运行Debug JS Remotely。如果您已经在运行它,那么只需停止远程调试。它会起作用的。

【讨论】:

  • 谢谢。就我而言,我使用调试控制台打开了一个浏览器选项卡,这导致了问题。我能够像平常一样运行该应用程序。
【解决方案4】:

在 android 文件夹上运行 ./gradlew clean 然后从手机上卸载应用程序对我有用。

【讨论】:

    【解决方案5】:

    使用“react-native init”命令创建项目,因为它只为您构建 react-native 而不是 expo 和其他节点模块,然后为特定平台构建,例如。在我的情况下,“react-native run-android”可以正常工作。

    【讨论】:

    • 如何在从git克隆的项目中做到这一点?
    • 嗯... repo 是空的还是包含一些东西?
    【解决方案6】:

    在我的情况下,正在使用我的手机进行测试和开发,突然出现白屏问题。

    应用程序根本没有加载,没有错误,没有代码更新,只有在 npx react-native run-android 后出现白屏。

    我的解决方案是在从缓存加载时清除手机缓存。

    我重新启动了手机,然后清除了所有缓存,然后它对我有用。

    【讨论】:

    • Diwakar,当您提到清除手机缓存时,最好说明您如何清除的步骤。您是否从设置中清除应用缓存?你重新加载应用程序吗?你运行react-native start --reset-cache 吗?你在 Android 文件夹中运行./gradlew clean 吗?回答时尽量具体一点。这将有助于 OP 更好地理解。
    • 这对我有用,通过清除手机中的应用缓存
    【解决方案7】:

    在物理 android 设备上运行应用程序的步骤如下:

    1. 从 IntelliJ 中的 app 文件夹中打开“android”文件夹
    2. 在 IntelliJ 中运行,目标:USB 设备
    3. .apk 安装完成后,在 app 文件夹中右移右键,运行 PowerShell,输入“react-native run-android”
    4. 完成后,在物理设备上打开应用,摇一摇打开开发者菜单,然后点击“重新加载”

    您也可以按住设备上的菜单按钮打开开发者菜单(在应用运行时)

    【讨论】:

    • 这是我按照上述步骤得到的结果“命令run-android 无法识别。确保您已运行npm install 并且您位于react-native 项目中。” :(
    【解决方案8】:

    我在模拟器中也遇到了同样的问题。所以我解决它的方法是进入Android设置 - 应用程序 - 选择应用程序,然后强制停止它。然后我尝试再次打开该应用程序,它成功了。

    在我这样做之前,我删除了 /android/app/ 下的“build”文件夹并重新运行。没用。

    【讨论】:

    • 也遇到了这个问题。在执行“强制停止”并打开它之后工作
    【解决方案9】:

    对我来说经常解决这个问题的一件事是重新安装你的 node_modules 文件夹并清理你的 gradle 构建。您可以手动执行此操作,但是,如果您遇到此问题一次或多次,请考虑运行 shell 脚本来自动执行此过程。

    创建一个名为clean.sh 的文件并将其粘贴到其中:

    echo "Removing node modules from $1 then reinstalling..."
    cd $1
    rm -rf node_modules
    yarn install
    echo "Cleaning gradle project..."
    cd android
    ./gradlew clean
    cd ..
    

    如果使用 npm,请将上面的“yarn”更改为“npm”。

    把上面的文件放到你项目的父目录下(如果你的项目位于C:\Users\your.name\projects\project1,把clean.sh文件放到C:\Users\your.name\projects\)。

    要运行脚本,请在 Git Bash 或 Unix 终端中运行此脚本(确保将以下目录的名称更改为项目的父目录):

    cd C:/Users/your.name/projects
    ./clean.sh <project-name>
    

    现在重新启动您的应用时,请尝试同时重置打包程序的缓存。

    用纱线:

    yarn start --reset-cache
    yarn android
    

    使用 npm:

    npx react-native start --reset-cache
    npx react-native run-android
    

    【讨论】:

      【解决方案10】:

      就我而言,我之前的项目有一个地铁站。关闭它并再次运行新项目解决了这个问题。

      【讨论】:

        【解决方案11】:

        使用react-native-splash-screen。我尝试了很多方法来解决这个问题,但它不起作用,我认为这是最好的方法。

        【讨论】:

        • 谢谢,Hoàng Vũ Anh 的解决方案,我用我的方式解决了:)我也会试试你的......
        【解决方案12】:

        对我来说,我的测试设备上的 wifi 已断开连接。

        我必须确保运行 react 打包器/服务器的计算机和我的设备都连接到同一个 wifi 网络。

        【讨论】:

          【解决方案13】:

          我最近遇到这种白屏问题

          1.Release后总是白屏

          "npx react-native start" 然后

          “npx react-native run-android”

          2.它在特定的几秒钟内显示白屏,或者在正常工作的应用程序中突然总是显示白屏

          由于应用程序缓存或流量和 android 更新版本,在某些情况下,当您使用带有 HTTP 而不是 HTTPS 的 API 时

          原因是较新的 android 版本更安全,它们会尝试限制 HTTP 请求

          解决方案是 在路径project\android\app\src\main\androidmanifest.xml中添加这一行:

          android:usesCleartextTraffic="true"
          

          【讨论】:

          【解决方案14】:

          它找不到它的导航路线。您应该检查导航。

          【讨论】:

            猜你喜欢
            • 2021-02-10
            • 1970-01-01
            • 1970-01-01
            • 2023-02-16
            • 1970-01-01
            • 1970-01-01
            • 2021-04-16
            • 1970-01-01
            相关资源
            最近更新 更多