React Native使用Drawer导航时触发Invariant Violation错误求助

报错信息 #

ERROR TypeError: null is not an object (evaluating '_ReanimatedModule.default.createNode')
ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

我的代码 #

function NotificationsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Button 
        onPress={() => navigation.goBack()}
        title="Go back home"
      />
    </View>
  );
}

const Drawer = createDrawerNavigator();
export default function App() {
    return (
        <NavigationContainer>
        <Drawer.Navigator initialRouteName="Home">
          <Drawer.Screen name="Home" component={HomeScreen} />
          <Drawer.Screen name="Notifications" component={NotificationsScreen} />
        </Drawer.Navigator>
      </NavigationContainer>
    );
}

已尝试的解决方案 #

在babel.config.js中添加了Reanimated插件配置，但问题未解决：

plugins: [
  "react-native-reanimated/plugin",
],

可行解决步骤 #

1. 修正Reanimated的Babel插件位置 #

react-native-reanimated/plugin必须放在Babel插件数组的最后一位，否则会导致初始化异常：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    // 其他插件写在前面
    "react-native-reanimated/plugin" // 必须是最后一个
  ],
};

2. 完整重新安装依赖与缓存清理 #

• 执行依赖重装：npm install（或yarn install）
• iOS平台执行：cd ios && pod install && cd ..
• 清除Metro缓存并重启服务：npx react-native start --reset-cache
• 可选：删除iOS的ios/build文件夹或Android的android/build、android/app/build文件夹后重新编译

3. 确认Reanimated初始化顺序 #

在项目入口文件（如index.js）中，优先导入Reanimated：

import 'react-native-reanimated';
// 再导入其他组件或库
import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);

4. 检查依赖版本兼容性 #

确保@react-navigation/native、@react-navigation/drawer、react-native-reanimated的版本相互匹配，可参考React Navigation官方文档的版本对应表调整。

5. Android平台额外配置检查 #

在android/app/build.gradle中确认依赖配置：

dependencies {
  implementation project(':react-native-reanimated')
}

在android/settings.gradle中确认：

include ':react-native-reanimated'
project(':react-native-reanimated').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-reanimated/android')

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