Error : Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'NativeReanimated' could not be found

Question

我遵循了本教程 https://medium.com/@ritikjain1272/making-drawer-navigator-and-a-splash-screen-on-your-react-native-app-2fb561ee17f1 并且我过去已经能够开发多个移动应用程序。编译成 APK 并上传到 Playstore，但这是过去的事了。

从今天开始就开始尝试，但很难让它像往常一样工作。 我不断收到此错误

Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'NativeReanimated' could not be found. Verify that a module by this name is registered in the native binary.

我的代码对于 App.js

是这样的

import {createAppContainer, createSwitchNavigator} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import {createDrawerNavigator} from 'react-navigation-drawer';
import Icon from 'react-native-vector-icons/SimpleLineIcons';

import Splash from './src/Splash';
import Login from './src/Login';
import Register from './src/Register';
import Dashboard from './src/Dashboard';
import InstantMessage from './src/InstantMessage';

const LoginNavigator = createStackNavigator({
  'Login': {
    screen: Login,
    navigationOptions: ({navigation}) => ({
      headerLeft: () => (
        <TouchableOpacity
          style={{marginLeft: 20}}
          onPress={() => navigation.toggleDrawer()}>
          <Icon name="menu" size={12} />
        </TouchableOpacity>
      ),
    }),
  },
});

const RegisterNavigator = createStackNavigator({
  'Register': {
    screen: Register,
    navigationOptions: ({navigation}) => ({
      headerLeft: () => (
        <TouchableOpacity
          style={{marginLeft: 20}}
          onPress={() => navigation.toggleDrawer()}>
          <Icon name="menu" size={12} />
        </TouchableOpacity>
      ),
    }),
  },
});

const DashboardNavigator = createStackNavigator({
  'Home': {
    screen: Dashboard,
    navigationOptions: ({navigation}) => ({
      headerLeft: () => (
        <TouchableOpacity
          style={{marginLeft: 20}}
          onPress={() => navigation.toggleDrawer()}>
          <Icon name="menu" size={12} />
        </TouchableOpacity>
      ),
    }),
  },
});

const InstantMessageNavigator = createStackNavigator({
  'Instant Message': {
    screen: InstantMessage,
    navigationOptions: ({navigation}) => ({
      headerLeft: () => (
        <TouchableOpacity
          style={{marginLeft: 20}}
          onPress={() => navigation.toggleDrawer()}>
          <Icon name="menu" size={12} />
        </TouchableOpacity>
      ),
    }),
  },
});


const DrawerNavigator = createDrawerNavigator({

  Dashboard: {
    navigationOptions: {
      drawerIcon: (
        <Image
          source={{uri: 'asset:/icons/megaphone.png'}}
          style={{width: 21, height: 21}}
        />
      ),
      drawerLabel: 'Home',
    },
    screen: DashboardNavigator,
  },

  InstantMessage: {
    navigationOptions: {
      drawerIcon: (
        <Image
          source={{uri: 'asset:/icons/megaphone.png'}}
          style={{width: 21, height: 21}}
        />
      ),
      drawerLabel: 'Messages',
    },
    screen: DashboardNavigator,
  },
});



const AppSwitchNavigator = createSwitchNavigator(
  {
    Splash: {screen: Splash},
    Login: {screen: Login},
    Drawer: {screen: DrawerNavigator},
  },
  {
    initialRouteName: 'Splash',
  },
);

const App = createAppContainer(AppSwitchNavigator);
export default App;

package.json 看起来像这样

{
  "name": "xxxxxxxxx",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "@react-native-picker/picker": "^1.9.8",
    "react": "16.13.1",
    "react-native": "0.63.4",
    "react-native-gesture-handler": "^1.9.0",
    "react-native-hr": "^1.1.4",
    "react-native-hr-component": "^2.0.3",
    "react-native-picker-select": "^8.0.4",
    "react-native-reanimated": "^1.13.2",
    "react-native-safe-area-context": "^3.1.9",
    "react-native-screens": "^2.16.1",
    "react-native-vector-icons": "^7.1.0",
    "react-navigation": "^4.4.3",
    "react-navigation-drawer": "^2.6.0",
    "react-navigation-stack": "^2.10.2"
  },
  "devDependencies": {
    "@babel/core": "7.12.10",
    "@babel/runtime": "7.12.5",
    "@react-native-community/eslint-config": "1.1.0",
    "babel-jest": "25.5.1",
    "eslint": "6.8.0",
    "jest": "25.5.4",
    "metro-react-native-babel-preset": "0.59.0",
    "react-test-renderer": "16.13.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

我可能做错了什么？老实说，我需要帮助。这是一个 React Native CLI 项目。

Answer 1

我通过降级 react-native-reanimated

解决了这个问题

如果您使用 npm，请执行此操作：

npm install react-native-reanimated@1.9.9

如果您使用纱线，请执行此操作：

yarn upgrade react-native-reanimated@1.9.9

如果您想手动更改版本 react-native-reanimated 到 react-native-reanimated: ^1.9.9 in package.json 然后 运行 npm install 或 yarn add

Answer 2

我解决了这个问题。

您需要安装这两个版本的库

react-native-reanimated": "^1.13.2"
"@react-navigation/drawer": "^5.11.4"

这绝对适合我

Answer 3

我遇到了同样的问题“Image Loader”而不是“NativeReanimated” 我刚刚停止了调试器，并在 chrome 浏览器上用一个空的 catch 进行了硬重载。 然后它工作正常