react-native - react 抽屉导航给我不变违规: Module AppRegistry is not a registered callable module

Question

我在另一个项目中遇到了问题，它指向了我正在使用的 react 抽屉导航，所以我决定打开一个测试文件来尝试重现问题

我从 react 导航网站复制代码并运行它，它给了我这个错误

ERROR  TypeError: undefined is not an object (evaluating 'InnerNativeModule.installCoreFunctions')
 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.
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling unmountApplicationComponentAtRootTag). 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.
ialization error when loading React Native.

这里是代码

import 'react-native-gesture-handler';
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';

function Feed() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Feed Screen</Text>
    </View>
  );
}

function Article() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Article Screen</Text>
    </View>
  );
}

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Feed" component={Feed} />
      <Drawer.Screen name="Article" component={Article} />
    </Drawer.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyDrawer />
    </NavigationContainer>
  );
}

这是我下载的包

  "dependencies": {
    "@react-navigation/drawer": "^6.1.8",
    "@react-navigation/native": "^6.0.6",
    "react": "17.0.2",
    "react-native": "0.66.4",
    "react-native-gesture-handler": "^2.1.1",
    "react-native-reanimated": "^2.3.1",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.10.1"
  },

我在网上看到可能是我忘记下载东西了，但我能弄清楚是什么

Answer 1

所以~这是因为没有正确安装 react-native-reanimated (不变量 Violation 的非常常见的原因:Module AppRegistry 不是注册的可调用模块)，

要解决这个问题，只需遵循 react-native-reanimated 网站上的文档 https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/

第 1 步:在 babel.config.js 中

    module.exports = {
      ...
      plugins: [
          ...
          'react-native-reanimated/plugin',//Add this
      ],
  };

第 2 步:在 android/app/build.gradle

project.ext.react = [
  enableHermes: true  // <-change this to true
]

第 3 步:在 MainApplication.java 中

  import com.facebook.react.bridge.JSIModulePackage; // <- add
  import com.swmansion.reanimated.ReanimatedJSIModulePackage; // <- add
  ...
  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
  ...

      @Override
      protected String getJSMainModuleName() {
        return "index";
      }

///////////////////////////////////////////////////
      @Override
      protected JSIModulePackage getJSIModulePackage() {      <- add this block
        return new ReanimatedJSIModulePackage(); // 
      }
///////////////////////////////////////////////////
    };

第 4 步:在终端中

cd android 
./gradlew clean
cd ../ 

第 5 步:为了安全起见

npx react-native run-android -- --reset-cache