undefined不是对象（评估'RNGestureHandlerModule.State'

Question

我在我的React Native项目中安装了react-navigation。它的启动项目没有任何代码。但是在运行项目时我遇到了这样的错误。

这是我的导航代码

import { createStackNavigator } from 'react-navigation';

import Home from './screens/Home';
import WeatherDetail from './screens/WeatherDetail';


const Navigation = createStackNavigator({
  Home: { screen: Home },
  WeatherDetail: {
  screen: WeatherDetail
 } 
});

export default Navigation;

这是App.js代码

 import Navigator from './Router';


 export default class App extends Component {
   render() {
     return (
       <View style={styles.container}>
         <Navigator />
       </View>
     );
    }
  }

如果我从App.js中删除导航器组件并将其替换为Text，则应用程序运行时不会出现任何错误。

Answer 1

1. 删除node_modules和package-lock.json
2. npm install
3. npm install --save react-navigation
4. npm install --save react-native-gesture-handler
5. react-native link

Answer 2

尽管react-native-gesture-handler存在于node_modules文件夹中，但我们需要将其添加到路径或再次安装它。然后链接本机代码。

1）npm install --save react-native-gesture-handler

success Saved 1 new dependency.
info Direct dependencies
└─ [email protected]
info All dependencies
└─ [email protected]

2）react-native link

rnpm-install info Linking react-native-gesture-handler ios dependency 
rnpm-install info Platform 'ios' module react-native-gesture-handler has been
 successfully linked 
rnpm-install info Linking react-native-gesture-handler android dependency 
rnpm-install info Platform 'android' module react-native-gesture-handler has
 been successfully linked

3）react-native run-android或react-native run-ios

Answer 3

如果您在ios中使用Podfile配置。请遵循以下步骤：

• 在pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler'中评论此行<react-native-project>/ios/Podfile。
• 打开<react-native-project>.xcworkspace在库中添加RNGestureHandler.xcodeproj（右键单击库文件夹，然后从node_modules/react-native-gesture-handler/ios选择“添加文件到”）。
• 添加libRNGestureHandler.a（Build Phases） - >（Link Binary With Libraries）。

Answer 4

这对我也很有用。 1）npm install react-navigation 2）npm install react-native-gesture-handler 3）npm intstall 4）react-native link

卸载应用程序

5）react-native run-android

Answer 5

在命令提示符中执行以下命令（以管理员身份运行）

 npm install react-navigation
 npm install react-native-gesture-handler
 npm intstall
 react-native link

重新安装该应用程序将解决该问题。

Answer 6

我为此苦苦挣扎，上述答案都没有对我有用。这就是我必须做的事情：

• 完全删除你的ios文件夹。
• 删除你的node_modules文件夹和package-lock.json。
• 重启你的电脑。
• 运行react-native eject以重新创建本机代码文件夹。
• 运行npm install
• 运行react-native link
• 运行npm run start -- --reset--cache
• 现在运行react-native run-ios

Answer 7

看看你的本机反应版本，如果版本0.60然后你必须使用jetifier迁移到androidX，请按照此链接中的步骤https://github.com/mikehardy/jetifier

对我成功:)

Answer 8

如果你已经完成了上述操作，它还没有运行，请尝试使用Windows

cd android 

.\gradlew cleanBuildCache

并尝试运行它

react-native run-android 

Answer 9

首先，删除node_modules和package-lock.json并运行npm install。在React Native项目中安装react-navigation软件包之后。您应该安装react-native-gesture-handler。如果你正在使用Expo，你不需要在这里做任何事情，它包含在SDK中。除此以外：

npm install react-native-gesture-handler

最后，链接手势依赖关系：

react-native link react-native-gesture-handler

这个答案基于React Navigation document。

Answer 10

如果您使用react-link链接您的依赖项：

1. 0pen你的ios Podfile并删除所有链接的依赖项：pod'xxxxxx'，：path =>'../node_modules/xxxxx
2. 关闭Xcode
3. 在你的/ ios文件夹中运行“pod update”
4. 在您的项目源代码中运行“react-native link”
5. 从Xcode菜单 - >产品打开Xcode和Clean Build Folder
6. 从Xcode运行您的应用程序
7. 按照文档中的步骤手动将依赖项“react-native-gesture-handler”链接到您的Xcode项目中：https://facebook.github.io/react-native/docs/linking-libraries-ios
8. 现在从Xcode运行你的应用程序，你应该没问题。

Answer 11

来自官方文件：

如果您使用的是React Native> = 0.60，则需要先为react-native-gesture-handler禁用自动链接。要为其禁用自动链接，请在项目的根目录中使用以下内容创建react-native.config.js文件：

module.exports = {
  dependencies: {
    'react-native-gesture-handler': {
      platforms: {
        android: null,
        ios: null,
      },
    },
  },
};

如果您使用的是React 0.60，请忽略此官方文档。请遵循以下步骤：

1. rm react-native.config.js若存在
2. react-native link react-native-gesture-handler
3. cd ios && pod install && cd ..
4. react-native run-ios

Answer 12

也许有人来这里因为和我一样的问题。

我得到了这个错误，因为我正在使用react-navigation版本3.x，在该版本stackNavigator更改为createStackNavigator并应使用createAppContainer(createStackNavigator)

即时修复它就像mr.amiri said但我不删除我的node_module即时按照步骤3 - 5

Answer 13

由于我不被评论，我在这里发帖。这是@Amiri Houssem的答案，但我还要补充一点：

1. remove node_modules and package-lock.json
2. npm install
3. npm install --save react-navigation
4. npm install --save react-native-gesture-handler
5. react-native link

如果在这5个步骤后仍然出现错误，请检查android / settings.gradle并将该行更改为：

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

Answer 14

我在RN v0.60上的ios上得到了同样的错误

以下对我有用：

cd ios
pod install

Answer 15

我正在回答，因为上述答案都与我无关。

我收到此错误是因为当我添加import { TouchableOpacity } from 'react-native-gesture-handler'元素时，VSCode自动将<TouchableOpacity>作为依赖项添加到我的文件中。

给你编辑的最后一个文件一次性，以防有一个你不期望的import语句！

Answer 16

可能是它的晚了。临时解决方案降级反应导航的版本： 1-取消链接并卸载react-navigation和处理程序 2-添加“react-navigation”：“^ 2.18.2”到package.json 3-删除node_modules文件夹 我下午4点 5-反应原生链接