解决 React Native 中的常见错误

乜思淼

2023-12-01

React Native 是当今最常用的 JavaScript 移动框架之一。React Native 使熟悉 JavaScript 和 React Web 框架的开发人员能够使用类似的方法和原理开发移动应用程序。

作为一个 React Native 开发者，你在开发你的应用程序时必然会遇到一些错误。当编译器在运行代码时检测到错误时，它会终止进程并显示错误消息。

React Native 中的错误消息非常具有描述性。它们告诉开发人员发生了什么错误以及检测到错误的位置。此外，它们通常会提供明确的说明或至少提供有关如何解决问题的线索。

有些错误本质上比其他错误更容易调试。例如，由于使用错误的语法或访问未定义的变量或组件而发生的错误比由错误配置或不兼容的依赖项引起的错误更容易调试。

无论错误的性质如何，您通常都需要帮助来解决它们。

在这篇文章中，我将介绍一些常见的 React Native 错误及其解决方案。其中一些错误将有不同的解决方案，具体取决于首先导致错误的原因。对于此类错误，请逐个查看解决方案。

随意使用以下链接跳至以下任何部分：

安装应用程序失败
无法加载脚本
React Nativerun-android命令无法识别
react-native找不到相关命令
无法识别的命令：“链接”
重复资源

安装应用程序失败

创建新的 React Native 项目后，第一次尝试使用命令运行应用时react-native run-android，可能会遇到以下错误：

BUILD FAILED in 13s

error Failed to install the app. Make sure you have an Android emulator running or a device connected. Run CLI with --verbose flag for more details.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081

FAILURE: Build failed with an exception.
...

此错误消息表示构建过程不成功，并且还指定了失败的特定命令。有时您可以通过简单地使用新的命令提示符并重新启动虚拟设备来消除错误。

然而，错误通常是由使用不兼容的 Gradle 版本来构建应用程序引起的。

Android Studio 构建系统需要正确版本的Gradle 才能成功构建 Android 应用程序。在这种情况下，您需要将应用中使用的 Gradle 版本升级到与您的 Android Studio 构建系统兼容的版本。

按着这些次序：

在 VS Code 等文本编辑器中打开您的 React Native 应用程序
在应用程序的根文件夹中，导航到android > gradle > wrapper
编辑gradle-wrapper.properties文件
distributionUrl使用 Gradle 兼容版本的 URL更新变量
react-native run-android再次运行以使用新版本构建应用程序。

这是第二步和第三步的完整路径：

{your-project-folder}\android\gradle\wrapper\gradle-wrapper.properties

要获得第四步的准确版本的 Gradle，请转到 Gradle 的分发列表并检查最新的-all.zipGradle 版本。然后，distributionUrl按如下方式更新变量：

distributionUrl=https\://services.gradle.org/distributions/gradle-{latest version}.zip

要了解有关 Gradle 和 Android Studio 的更多信息，请阅读Android Gradle 插件和 Android Studio 兼容性文章。

无法加载脚本

开发人员在尝试运行他们的 React Native 应用程序时经常遇到的另一个错误如下所示：

Unable to load script. Make sure you're either running a metro server (run 'react-native start') or that your bundle 'index.android.bundle' is packaged correctly for release.

此错误始终显示在连接的 Android 设备上。此错误有多种原因。因此，也有不同的解决方案。

解决方案 1：正确打包捆绑包

您应用的所有 JavaScript 都捆绑到该index.android.bundle文件中。如果捆绑文件不可用或未正确打包，您将收到Unable to load script错误消息。请按照以下说明进行修复。

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →

进入{your-project-folder}/android/app/src/main/文件夹并检查其中是否assets存在文件夹。如果资产文件夹不存在，请创建它。

接下来，直接从您的根文件夹中运行：

cd android
./gradlew clean

接下来，打开一个命令终端并确保它指向您项目的根文件夹。如果您的项目只有一个文件（即index.js），请运行以下命令：

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

如果有两个文件（即index.android.js和index.ios.js），则改为运行以下命令：

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

请注意，两者都是单个命令。

生成包后，运行react-native run android.

要一次执行上述所有步骤，您可以将它们放在scriptspackage.json 的部分中，如下所示：

"android-script": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res && react-native run-android"

上面的命令是npm run android-script.

解决方案 2：使用adb reverse

如果您在实施第一个解决方案后仍然收到相同的错误，那么您需要考虑其他原因。另一个常见原因是端口未暴露。如果您在物理设备上运行应用程序，就会发生这种情况。

该adb reverse命令允许您使用计算机上的 TCP 端口公开 Android 设备上的 TCP 端口。要尝试修复错误，请运行以下命令：

adb reverse tcp:8081 tcp:8081

在这里，您通过计算机上的端口 8081 暴露电话上的 TCP 端口 8081。

PATH如果您的 Windows变量中没有 Android 平台工具组件，则可adb执行文件位于以下路径：

C:\Users\{your-username}\AppData\Local\Android\sdk\platform-tools

解决方案 3：添加明文支持

如果前两个选项不能解决 React Native 无法加载脚本，那么错误很可能来自网络通信问题。

具体来说，由于明文支持被禁用，应用程序可能无法从开发服务器访问，从 Android 9.0（API 级别 28）开始就是这种情况。

要解决此问题，请修改AndroidManifest.xml文件并添加明文支持，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<manifest ...>
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        ...
        android:usesCleartextTraffic="true"
        ...>
        ...
    </application>
</manifest>

您可以在以下位置找到您的AndroidManifest.xml文件：

{your-project-folder}/android/app/src/main/AndroidManifest.xml

重新启动您的应用程序以应用更改。

React Nativerun-android命令无法识别

有时，当您尝试在 Android 上运行 React Native 应用程序时，您可能会在命令提示符下收到以下错误消息：

Command run-android unrecognized. Did you mean to run this inside a react-native project?

错误消息已经暗示了错误的最常见原因：您没有在 React Native 文件夹中运行该命令。在这种情况下，解决方案是确保在运行应用程序之前导航到应用程序的根文件夹。这就是我的意思：

// After initializing a project:
react-native init AwesomeProject

// Make sure to navigate to the project folder:
cd AwesomeProject

// Before you run the app:
react-native run-android

否则，如果错误不是因为使用了错误的文件夹，那么可能是您没有安装项目的内容。为此，请运行：

npm install or yarn install

您的 react-native 或 react-native-cli 的全局安装也可能是旧的或损坏的。在这种情况下，只需使用以下命令之一在全局范围内重新安装您的库：

npm：

npm install -g react-native && npm install -g @react-native-community/cli

纱：

yarn global add react-native && yarn global add @react-native-community/cli

作为说明，我建议使用npx（包含在 npm v5.0+ 中）按需安装库。

这意味着无论何时您运行任何其他 React Native CLI 命令，它都会在创建项目之前npx react-native init <your-project-name>首先询问您的安装权限。react-native这可确保您始终使用最新版本！

最后，如果以上所有方法都不起作用，您可能需要使用以下命令升级您的 npm：

npm install npm@latest -g

确保使用新终端运行这些命令中的每一个。这是为了防止在您的.bashrc文件中使用过时的路径源。

react-native找不到相关命令

command not found: react-native是 React Native 中的另一个常见错误。尝试运行任何react-native命令时都会遇到此错误，例如尝试初始化 React Native 项目时，如下所示：

react-native init MyProject

该command not found错误有两个潜在原因：或者您没有在本地计算机上安装 CLI，或者您安装了 CLI，但没有正确配置。

通过对所有 npm 可执行文件使用 npx 可以避免这两种情况。例如，要创建一个新的 React Native 应用程序，请使用 npx 运行它，如下所示：

npx react-native init MyProject

react-native这将在初始化项目之前安装包的最新可用版本。

无法识别的命令：“链接”

尝试在 React Native 项目中链接自定义字体或图标等资产时，您可能会在命令终端上收到以下错误：

error Unrecognized command "link". info Run "react-native --help" to see a list of all available commands.

当您尝试使用手动链接功能（即react-native link和react-native link unlink命令）时会发生此错误，该功能已在 React Native 0.69 中删除并替换为自动链接。

为避免此错误，您需要使用第三方资产链接库，例如react-native-asset自动链接资产。

首先，使用以下命令之一安装库：

npm install -g react-native-asset
# or if you're using yarn: 
yarn global add react-native-asset

react-native.config然后在项目文件夹的根级别创建一个文件并添加以下代码片段：

module.exports = {
    project: {
        ios: {},
        android: {}
    },
    "assets": [
      "./src/assets/font",
      "./src/assets/mp3",
      "./src/assets/icons"
  ]
};

运行以下命令之一以在您的代码库中启用自动链接和取消链接。

npm：

npx react-native-asset

纱：

yarn react-native-asset

现在您可以在代码中使用任何指定的资产。例如，您可以在样式表中使用自定义字体：

fontFamily: 'my-custom-font'

Soul音听歌神器App，聚合5大平台音乐资源无限畅听，支持下载无损音质歌曲！

重复资源

尝试使用from生成发布 APK时可能遇到的另一个常见错误是 Duplicate Resource 错误：Generate Signed APK``Android Studio

[drawable-mdpi-v4/jumper] /Users/admin/Projects/testApp/android/app/src/main/res/drawable-mdpi/jumper.png [drawable-mdpi-v4/jumper] /Users/admin/Projects/testApp/android/app/build/generated/res/react/release/drawable-mdpi-v4/jumper.png: Error: Duplicate resources
:app:mergeReleaseResources FAILED

FAILURE: Build failed with an exception.

...

构建失败是因为在 Android 文件夹内的 Android 项目中发现了重复的资源。根据原因，有多种解决方案。

解决方案 1：从终端清理可绘制文件夹

drawable通常，您只需使用 Gradle 从终端清理文件夹即可摆脱错误。为此，请cd进入android文件夹，然后./gradlew clean在尝试再次运行应用程序之前运行：

react-native run android

如果失败，请尝试下一个解决方案。

解决方案 2：添加一些帮助代码

大多数情况下，简单地清理drawable文件夹并不能解决问题。如果是这种情况，那么您需要对react.gradle文件进行轻微修改以防止重复的资源冲突。

在. react.gradle_ node_modules/react-native/react.gradle代码应该放在doFirst块之后：

doLast {
    def moveFunc = { resSuffix ->
        File originalDir = file("$buildDir/generated/res/react/release/drawable-${resSuffix}");
        if (originalDir.exists()) {
            File destDir = file("$buildDir/../src/main/res/drawable-${resSuffix}");
            ant.move(file: originalDir, tofile: destDir);
        }
    }
    moveFunc.curry("ldpi").call()
    moveFunc.curry("mdpi").call()
    moveFunc.curry("hdpi").call()
    moveFunc.curry("xhdpi").call()
    moveFunc.curry("xxhdpi").call()
    moveFunc.curry("xxxhdpi").call()
}

这个错误在 2018 年由GitHub 用户 echaso 解决，他提供了上面的代码。

结论

在本文中，我们研究了 React Native 中的六个常见错误以及如何调试每个错误。如果您遇到的错误未包含在此处，请不要犹豫，