React Native装饰器支持失效，配置后构建仍报错求助

我看你在React Native项目里尝试用@withMappedNavigationProps()装饰器，已经配置了相关babel插件但还是遇到了构建报错。结合你的配置和报错信息，我整理了几个可能的解决方案：

1. 修正.babelrc的配置顺序与冗余项 #

你的.babelrc里同时在presets和plugins中配置了transform-decorators-legacy，还混用了react-native-stage-0/decorator-support，这很可能导致转译逻辑冲突。试试把配置改成下面这样：

{
  "presets": [
    ["react-native-stage-0", { "decoratorsLegacy": true }],
    "react-native"
  ]
}

或者如果更习惯分开配置插件：

{
  "presets": [
    "react-native-stage-0",
    "react-native"
  ],
  "plugins": [
    "transform-decorators-legacy"
  ]
}

说明：react-native-stage-0的decoratorsLegacy选项会自动引入装饰器转译支持，不需要重复在presets里加transform-decorators-legacy，同时确保react-native预设放在最后，避免覆盖前面的配置。

2. 对齐babel相关依赖版本 #

你当前的babel-preset-react-native是4.0.0版本，和babel-plugin-transform-decorators-legacy1.3.4可能存在兼容性问题。建议调整依赖版本，让babel生态的版本尽量匹配：

更新你的package.json devDependencies：

"devDependencies": {
  "babel-jest": "^23.0.1",
  "babel-plugin-transform-decorators-legacy": "^1.3.5",
  "babel-preset-react-native": "^4.0.1",
  "babel-preset-react-native-stage-0": "^1.0.1",
  "jest": "^23.0.1",
  "react-test-renderer": "16.2.0"
}

然后执行npm install或者yarn install重新安装依赖。

3. 清除React Native缓存并重启服务 #

旧的缓存可能会让无效的babel配置一直生效，执行以下命令清除缓存：

npm start -- --reset-cache
# 或者用yarn的话：
yarn start --reset-cache

之后重新运行你的项目：react-native run-android或react-native run-ios

4. 临时替代：不使用装饰器语法 #

如果以上方法都没解决，你可以暂时绕过装饰器，直接用函数包裹的方式使用HOC：

// 去掉@withMappedNavigationProps()装饰器
class Listing extends Component {
  // 你的组件逻辑
}

// 组合HOC
const EnhancedListing = withMappedNavigationProps()(
  connect(mapStateToProps, mapDispatchToProps)(Listing)
);

export default EnhancedListing;

这样写法和装饰器效果完全一致，还能避开装饰器转译的问题。

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