React Native集成InversifyJS遇TypeError: null is not an object(dispatcher.useMemo)

问题原因 #

这个错误源于Inversify相关依赖（尤其是inversify-inject-decorators）与React 18的渲染机制不兼容，导致内部调用useMemo时React调度器（dispatcher）未正确初始化，出现null引用。

具体解决方案 #

1. 调整reflect-metadata导入顺序 #

必须将reflect-metadata的导入放在所有其他代码最顶部，确保元数据在Inversify和React加载前完成初始化：

// App.tsx 最顶部
import "core-js/proposals/reflect-metadata";
// 后续再导入其他依赖
import React from "react";
import * as eva from "@eva-design/eva";
// ... 其他导入内容

2. 更新Inversify相关依赖版本 #

旧版本的inversify和inversify-inject-decorators不支持React 18，升级到兼容版本：
修改package.json的devDependencies字段：

"devDependencies": {
  "@babel/core": "^7.12.9",
  "@types/react": "~18.0.14",
  "@types/react-native": "~0.69.1",
  "inversify": "^6.0.1",
  "inversify-inject-decorators": "^4.0.0",
  "typescript": "~4.3.5"
}

执行npm install或yarn install完成依赖更新。

3. 确保IoC容器实例正确初始化 #

检查./ioc/ioc.ts中的容器创建逻辑，保证实例不为null：

// ioc.ts
import { Container } from "inversify";

export const container = new Container();
// 可在此注册服务，示例：container.bind(YourService).toSelf();

4. 配置Babel支持装饰器语法 #

Inversify依赖装饰器语法，在项目根目录的babel.config.js中添加相关插件：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      ['@babel/plugin-proposal-decorators', { legacy: true }],
      ['@babel/plugin-proposal-class-properties', { loose: true }]
    ]
  };
};

若未安装这些插件，先执行安装命令：

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

5. 验证Provider使用逻辑 #

确保根组件结构正确，Provider被包裹在React渲染上下文内：

export default () => (
  <>
    <IconRegistry icons={EvaIconsPack} />
    <ApplicationProvider {...eva} theme={eva.light}>
      <Provider container={container}>
        <App />
      </Provider>
    </ApplicationProvider>
  </>
);

测试验证 #

完成修改后，重启Expo开发服务器并清除缓存：

expo start --clear

重新加载应用即可验证错误是否解决。

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