如何处理使用ES6/ES7特性的node模块？create-react-native-app项目加载遇阻求助

嘿，我来帮你搞定这个问题！在create-react-native-app项目里遇到像React Navigation这类用了ES6/ES7特性（比如类属性）的模块报错，其实不用慌，下面几个方案都能解决：

方案一：配置转译指定第三方模块（适用于未eject的项目） #

如果你的项目还没eject，可以通过配置让项目转译指定的第三方模块：

• 在项目根目录新建rn-cli.config.js文件，写入以下代码，把需要转译的模块（比如React Navigation相关包）加入白名单：

module.exports = {
  resolver: {
    // 这里替换成你需要转译的模块名，多个用|分隔
    blacklistRE: /(node_modules\/(?!react-navigation|@react-navigation)\/)/,
  },
};

• 安装Babel插件来支持类属性：

npm install --save-dev @babel/plugin-proposal-class-properties

• 修改项目根目录的.babelrc（没有就新建），添加插件配置：

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

• 重启项目，让配置生效。

方案二：Eject项目获取完整配置权限 #

如果上面的方案不生效，或者你需要更灵活的自定义配置，可以选择eject项目：

• 运行命令完成eject：

npm run eject

（注意：eject是不可逆操作，执行前记得备份代码）

• eject完成后，项目会生成完整的ios、android文件夹和Babel/Metro配置文件
• 修改babel.config.js，确保包含类属性的支持插件：

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

• 编辑metro.config.js，配置让Metro转译指定的第三方模块：

const blacklist = require('metro-config/src/defaults/blacklist');

module.exports = {
  resolver: {
    blacklistRE: blacklist([
      /node_modules\/(?!react-navigation|@react-navigation)\/.*/,
    ]),
  },
};

• 重启项目即可。

方案三：升级到最新Expo SDK（Expo管理的项目） #

如果你的项目是Expo管理的（新版create-react-native-app默认基于Expo），直接升级Expo SDK就能解决大部分ES6/ES7兼容问题：

• 运行升级命令：

expo upgrade

• 升级完成后重新启动项目，Expo新版已经默认支持类属性这类ES7特性，报错大概率会自动消失。

额外小提示 #

• 记得检查package.json里的Babel相关依赖（比如@babel/core、@babel/plugin-proposal-class-properties）是否是最新版本，旧版本可能存在兼容问题
• 如果是特定子包报错，要把所有相关的包都加入转译列表，比如@react-navigation/native、@react-navigation/stack等

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