React Native使用Mobx @observer报错：decorators-legacy语法未启用

我来帮你搞定这两个棘手的问题——装饰器语法支持报错和缓存重置时的启动失败：

一、修复「decorators-legacy未启用」错误 #

你之前的配置问题主要在于babel配置文件的类型和插件顺序不对，按以下步骤调整：

1. 清理旧配置与依赖

   • 删除根目录的.babelrc文件（React Native 0.59+更推荐使用babel.config.js）
   • 卸载过时的装饰器插件：

     npm uninstall babel-plugin-transform-decorators-legacy --save-dev
     

2. 创建正确的babel配置文件
   在项目根目录新建babel.config.js，写入以下内容：

   module.exports = {
     presets: ['module:metro-react-native-babel-preset'],
     plugins: [
       // 必须将装饰器插件放在最前面，确保legacy模式优先处理
       ['@babel/plugin-proposal-decorators', { legacy: true }],
       'babel-plugin-mobx-deep-action' // 如果你需要这个MobX插件的话可以保留，不需要就删掉
     ]
   };
   

3. 验证组件中的装饰器使用
   确保你的组件正确引入并使用@observer：

   import React from 'react';
   import { View, Text } from 'react-native';
   import { observer } from 'mobx-react';
   
   @observer
   class TestComponent extends React.Component {
     render() {
       return (
         <View>
           <Text>测试MobX装饰器</Text>
         </View>
       );
     }
   }
   
   export default TestComponent;
   

二、解决npm start -- --reset-cache启动失败问题 #

你遇到的WebSocketServer错误大概率是端口被占用或缓存残留导致的，按以下步骤排查：

1. 彻底关闭相关进程
   关闭所有正在运行的React Native打包终端窗口、模拟器/真机调试进程。

2. 清理全量缓存与构建文件

   # 删除node_modules并重新安装
   rm -rf node_modules && npm install
   # 删除React Native全局缓存
   rm -rf ~/.rncache
   # 删除iOS和Android的构建文件
   rm -rf ios/build android/build
   

3. 检查并释放8081端口
   React Native默认使用8081端口，若被占用则杀掉对应进程：

   # macOS/Linux系统
   lsof -ti:8081 | xargs kill -9
   # Windows系统
   netstat -ano | findstr :8081
   taskkill /PID <你查到的PID号> /F
   

4. 重新启动并重置缓存

   npm start -- --reset-cache
   

额外确认点 #

• 你的MobX版本（mobx@5.11.0）和mobx-react@6.1.1是兼容的，无需调整版本
• 你的@babel/core和metro-react-native-babel-preset版本与React Native 0.59.10匹配，版本没问题

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