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

【问题标题】：undefined is not an object (evaluating 'RNGestureHandlerModule.State'undefined 不是对象（评估 'RNGestureHandlerModule.State'
【发布时间】：2018-10-17 18:30:10
【问题描述】：

我在我的 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，则应用程序运行时不会出现任何错误。

【问题讨论】：

这一切看起来都正确，你能显示Home组件的代码吗？
我猜你需要把它和react-native link联系起来。
我在 iOS 中遇到了同样的问题。在这种情况下，您可以尝试手动添加 RNGesture 库。 tuntunir.blogspot.com/2019/02/…

标签： react-native react-navigation

【解决方案1】：

删除 node_modules 和 package-lock.json
npm install
npm install --save react-navigation
npm install --save react-native-gesture-handler
react-native link

【讨论】：

如果在所有步骤之后错误仍然存在，这是因为反斜杠，然后将这行代码更改为：project(':react-native-gesture-handler').projectDir = new文件（rootProject.projectDir，'../node_modules/react-native-gesture-handler/android'）
按照这些步骤以及卸载应用程序然后重建对我有用。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

来自官方文档：

如果您使用的是 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，请忽略此官方文档。请按照以下步骤操作：

rm react-native.config.js 如果存在
react-native link react-native-gesture-handler
cd ios && pod install && cd ..
react-native run-ios

【讨论】：

在世博项目中也是如此吗？因为它没有写在任何地方。

【解决方案4】：

首先，删除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。

【讨论】：

【解决方案5】：

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

以下内容对我有用：

cd ios
pod install

【讨论】：

优秀。最简单（也可能是最正确）的解决方案。这个答案应该上移！

【解决方案6】：

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

我收到此错误是因为我使用的是 react-navigation 版本 3.x，在该版本中 stackNavigator 更改为 createStackNavigator 并且应该使用 createAppContainer(createStackNavigator)

我像mr.amiri said 一样修复它，但我没有删除我的 node_module 我只是按照步骤 3 - 5 进行操作

【讨论】：

【解决方案7】：

由于不允许发表评论，所以我将其发布在这里。这是@Amiri Houssem 的答案，但我还要添加一件事：

remove node_modules and package-lock.json
npm install
npm install --save react-navigation
npm install --save react-native-gesture-handler
react-native link

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

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

【讨论】：

我认为您不需要为此执行第 1 步和第 2 步，但彻底彻底总是好的。

【解决方案8】：

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

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

给你最后编辑的文件一次，以防万一有你不期望的导入语句！

【讨论】：

【解决方案9】：

我在 CLI 中使用它来解决问题

cd iOS
pod install

cd ..
react-native unlink react-native-gesture-handler

【讨论】：

【解决方案10】：

从设备上卸载应用程序并运行 android 项目 - react-native run-android 并且运行良好

【讨论】：

【解决方案11】：

你可以查看你的 react-native 版本如果 React Native 0.59 及更低版本可以

 react-native link react-native-gesture-handler

并在

中检查您的 @react-navigation 版本

https://reactnavigation.org/versions

【讨论】：

【解决方案12】：

可能为时已晚。 react导航版本降级临时解决方案：
1- 取消链接并卸载 react-navigation 和处理程序
2- 添加 "react-navigation": "^2.18.2" 到 package.json
3- 删除 node_modules 文件夹
4- npm i
5- react-native 链接

【讨论】：

【解决方案13】：

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

cd android 

.\gradlew cleanBuildCache

并尝试运行它

react-native run-android

【讨论】：

【解决方案14】：

即使react-native-gesture-handler 存在于node_modules 文件夹中，我们仍需要将其添加到路径或重新安装。然后与本机代码链接。

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

success Saved 1 new dependency.
info Direct dependencies
└─ react-native-gesture-handler@1.0.15
info All dependencies
└─ react-native-gesture-handler@1.0.15

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

【讨论】：

【解决方案15】：

如果您在 ios 中使用带有 Podfile 的配置。请按照以下步骤操作：

在<react-native-project>/ios/Podfile 中评论此行pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler'。
从node_modules/react-native-gesture-handler/ios打开<react-native-project>.xcworkspace在库中添加RNGestureHandler.xcodeproj（右键单击库文件夹并选择“将文件添加到”）。
在（构建阶段）->（将二进制文件与库链接）中添加 libRNGestureHandler.a。

【讨论】：

【解决方案16】：

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

卸载应用

5)react-native run-android

【讨论】：

【解决方案17】：

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

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

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

【讨论】：

【解决方案18】：

我为此苦苦挣扎，以上答案均不适合我。这是我必须做的：

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

【讨论】：

【解决方案19】：

查看您的本机反应版本，如果版本为 0.60，那么您必须使用 jetifier 迁移到 androidX，请按照此链接中的步骤操作 https://github.com/mikehardy/jetifier

对我来说成功:)

【讨论】：

请记住，链接的内容可能会被移动或删除，那么您的回答可能会变得毫无用处。最好是提及链接，但在您的答案中包含此链接内容中最有用的内容。

【解决方案20】：

如果你使用 React Native >= 0.60：

您应该在ios/Podfile 中看到以下条目：

  pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler'

如果此行不存在，请先运行：

react-native link react-native-gesture-handler

ios/Podfile 现在应该包含一个新条目。

现在从 iOS 目录 /ios/ 运行此命令：

pod install

直接使用XCode 或react-native run-ios 再次运行您的iOS 项目

【讨论】：