React Native中Mobx装饰器报错求助：decorator is not a function

算力阿峰

2026-5-15

解决Mobx装饰器在Expo React Native项目中的"decorator is not a function"错误

看起来你遇到的问题是Babel对装饰器语法的支持配置不到位，虽然你已经安装了transform-decorators-legacy，但还有几个关键点需要调整：

1. 调整Babel插件的顺序和环境覆盖

你的.babelrc目前只在development环境启用了装饰器相关插件，但Expo在打包或运行时可能默认使用生产环境配置，或者插件的加载顺序不对。装饰器插件必须放在transform-class-properties之前才能正常工作。修改你的.babelrc如下：

{
  "presets": ["babel-preset-expo"],
  "plugins": [
    "transform-decorators-legacy",
    "transform-class-properties"
  ],
  "env": {
    "development": {
      "plugins": [
        "transform-react-jsx-source"
      ]
    }
  }
}

把装饰器和类属性插件移到全局plugins数组中，确保所有环境都能加载它们，同时保持transform-decorators-legacy在transform-class-properties前面——这是因为装饰器需要先处理类的属性。

2. 确认依赖安装完整

虽然你已经装了transform-decorators-legacy，但transform-class-properties也需要作为开发依赖安装，执行以下命令确保：

yarn add --dev babel-plugin-transform-class-properties

3. 替代方案：不使用装饰器语法

如果调整Babel配置后还是有问题，可以暂时改用Mobx的非装饰器写法来定义可观察属性，这样能绕开Babel装饰器的兼容问题：

修改src/TodoStore.js：

import React from "react"
import { observable } from "mobx"
class TodoStore {
  list = observable(["one", "two"])
  filter = observable("")
  addListItem(item) {
    this.list.push("drei")
  }
}
export default TodoStore

这种写法不需要依赖装饰器插件，同样能实现Mobx的可观察属性功能。