Question

我正在尝试使用@react-navigation/drawer，但它无法正常工作

2022-03-23

8634

react-native navigation-drawer

这是我的 app.js 代码

import React from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import Home from './src/components/Home';
import Login from './src/components/Login';

const Drawer = createDrawerNavigator();
function App() {
  return(
    <NavigationContainer>
    <Drawer.Navigator>
      <Drawer.Screen name="Home" component={Home} />
      <Drawer.Screen name="Login" component={Login} />
    </Drawer.Navigator>
    </NavigationContainer>
  )
}

export default App;

这是我的依赖包

"dependencies": {
    "@react-navigation/bottom-tabs": "^6.2.0",
    "@react-navigation/drawer": "^6.3.1",
    "@react-navigation/native": "^6.0.8",
    "@react-navigation/native-stack": "^6.5.1",
    "react": "17.0.2",
    "react-native": "^0.65.0",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-reanimated": "^1.13.2"
  },

错误

错误 TypeError：null 不是对象（评估“_ReanimatedModule.default.createNode”）错误 Invariant Violation：Module AppRegistry 不是注册的可调用模块（调用 runApplication）。导致错误的一个常见原因是应用程序入口文件路径不正确。当 JS 包损坏或加载 React Native 时出现早期初始化错误时，也会发生这种情况。错误 Invariant Violation：Module AppRegistry 不是注册的可调用模块（调用 runApplication）。导致错误的一个常见原因是应用程序入口文件路径不正确。当 JS 包损坏或加载 React Native 时出现早期初始化错误时，也会发生这种情况。

当我尝试启动 react-native 时出现此错误...

请任何人帮助我并纠正我

Answer 1

我遇到了同样的错误。将 react-native-reanimated 版本升级到 [email protected] 解决了我的问题

我使用 npm install [email protected] ，然后卸载了以前的版本

Answer 2

我删除了 node_modules 文件夹，然后安装 yarn ，然后安装了 [email protected] ，它运行良好。

Answer 3

我遇到了相同/类似的问题，并且花了两天的时间才找到适合我的解决方案。分享它，希望它可以帮助别人：

为了使 drawer-navigation ( https://reactnavigation.org/docs/drawer-navigator ) 正常工作，我们需要执行以下操作：

(1) 使用以下命令安装 navigation-drawer：npm install @react-navigation/drawer。

(2) 通过以下方式安装 react-native-gesture-handler 和 react-native-reanimated：

     (a) For bare react-native: npm install react-native-gesture-handler react-native-reanimated
     (b) For expo projects: npx expo install react-native-gesture-handler react-native-reanimated

(3) 在我们的 babel.config.js 文件中添加 reanimated 插件，如以下代码所示：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      'react-native-reanimated/plugin',
    ],
  };
};

(4) 最后使用 -c 标志启动项目以重新启动而不是从缓存中启动：expo start my-app -c

这对我有用。希望它也能帮到你