React Native项目@connect装饰器引发打包错误问题求助

看起来你遇到的是Babel未正确处理ES7装饰器语法的问题，即使添加了react-native-stage-0预设也没生效，试试下面这些步骤来修复：

• 安装必要的Babel插件
  首先确保你安装了处理装饰器和类属性的最新Babel插件，在项目根目录执行：

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

• 修正.babelrc配置
  装饰器的配置有严格的顺序要求，必须将装饰器插件放在类属性插件之前，并且开启legacy模式。更新你的.babelrc为如下内容：

  {
    "presets": ["react-native"],
    "plugins": [
      ["@babel/plugin-proposal-decorators", { "legacy": true }],
      ["@babel/plugin-proposal-class-properties", { "loose": true }]
    ]
  }
  

  如果你坚持使用react-native-stage-0预设，需要注意这个预设可能没有默认开启装饰器的legacy模式，所以还是需要显式添加上述插件配置来覆盖默认设置。

• 清除Metro缓存并重启打包器
  React Native的Metro打包器经常会缓存旧的编译配置，导致新的Babel设置不生效。按以下步骤操作：

  1. 停止当前运行的Metro打包器（按Ctrl+C）
  2. 执行缓存重置命令：

     npx react-native start --reset-cache
     

  3. 重新运行你的项目：npx react-native run-android（或run-ios）

• 检查代码与依赖兼容性

  1. 确认@connect装饰器确实写在类定义的上方，没有语法错误，比如你的RootScreen.js中：

     // 确保mapStateToProps和mapDispatchToProps已正确定义
     const mapStateToProps = (state) => {
       // ...你的映射逻辑
     };
     
     const mapDispatchToProps = (dispatch) => {
       // ...你的dispatch映射
     };
     
     @connect(mapStateToProps, mapDispatchToProps)
     export default class RootScreen extends Component {
       // ...组件内容
     }
     

  2. 检查React Native版本与Babel版本是否匹配：如果你的RN版本是0.60及以上，必须使用Babel 7.x版本的插件（即@babel/开头的插件），不要使用旧的babel-plugin-transform-decorators-legacy这类插件。

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