求助：React Native 0.72.4中出现TextEncoder不存在的错误

先搞清楚TextEncoder是什么 #

TextEncoder是浏览器和Node.js环境提供的原生API，作用是将字符串编码为UTF-8格式的Uint8Array。像qr-code-svg这类需要处理字符串字节编码的库，生成二维码时会用它把文本转换成符合规范的字节流，所以你虽然没直接调用，但依赖库内部会用到。

为什么会出现这个错误？ #

React Native的JS运行环境（不管是Hermes还是JSC）默认没有全局暴露TextEncoder API，部分依赖库没有做跨环境兼容处理，导致调用时找不到这个全局对象，就抛出了引用错误。

可行的解决方案 #

1. 手动添加TextEncoder的Polyfill

• 先安装兼容库：

  npm install text-encoding
  # 或者用yarn
  yarn add text-encoding
  

• 在项目入口文件（比如index.js或App.js）的最顶部添加以下代码，把TextEncoder挂载到全局：

  import { TextEncoder, TextDecoder } from 'text-encoding';
  global.TextEncoder = TextEncoder;
  global.TextDecoder = TextDecoder;
  

  这个方法能直接补全缺失的API，大多数情况下能解决问题。

2. 替换为React Native专用的依赖库

qr-code-svg是面向Web环境的库，你可以换成React Native专用的二维码库，比如react-native-qrcode-svg——它是专为RN环境开发的，不需要依赖浏览器的TextEncoder这类API，兼容性更好。

安装命令：

npm install react-native-qrcode-svg
# 或yarn
yarn add react-native-qrcode-svg

替换后按照该库的文档调整代码即可。

3. 检查Hermes引擎的配置（如果使用Hermes）

如果你的项目启用了Hermes引擎，确认Hermes版本和RN 0.72.4匹配。部分旧版Hermes对Web标准API的支持不完善，你可以尝试在metro.config.js中添加配置，确保polyfill被正确加载：

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
  resolver: {
    extraNodeModules: {
      'text-encoding': require.resolve('text-encoding'),
    },
  },
};

内容的提问来源于stack exchange，提问作者VIGNESH KUMARAN