错误：不变违规：TurboModuleRegistry.getEnforcing(...): 'NativeReanimated' 找不到

Question

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

从今天开始尝试，但要让它像往常一样工作是非常不可能的。 我不断收到此错误

不变违规：TurboModuleRegistry.getEnforcing(...)： 找不到“NativeReanimated”。通过这个验证一个模块 name 已在本机二进制文件中注册。

对于 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": "^1.13.2"
"@react-navigation/drawer": "^5.11.4"

这绝对适合我

Answer 2

我通过降级 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 3

我遇到了同样的问题“Image Loader”代替“NativeReanimated” 我刚刚停止了调试器，并在 chrome 浏览器上用一个空的 catch 进行了硬重新加载。 然后就可以正常使用了