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

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

Answer 2

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

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

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

Answer 4

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

我收到此错误是因为我使用的是反应导航版本3.x，在该版本中，stackNavigator已更改为createStackNavigator，应使用createAppContainer(createStackNavigator)

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

Answer 5

由于不允许我发表评论，因此我将其张贴在这里。这是@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')

Answer 6

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

 react-native link react-native-gesture-handler

并在

中检查您的@react-navigation版本

https://reactnavigation.org/versions

Answer 7

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

cd iOS
pod install

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

Answer 8

摘自官方文档：

如果您使用的是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

Answer 9

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

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

将最后一次编辑的文件交给您，以防万一您不希望有导入语句！

Answer 10

这对我也很好。
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 11

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

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

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

Answer 12

如果在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。

Answer 13

我为此感到挣扎，以上答案对我都不起作用。这是我必须要做的：

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

Answer 14

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

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

Answer 15

我从RN v0.60在ios上遇到了相同的错误

以下对我有用：

cd ios
pod install

Answer 16

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

对我成功：）

Answer 17

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

Answer 18

如果您使用的是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项目

Answer 19

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

Answer 20

如果您已完成上述操作，但尚未运行，请尝试以下操作如果您使用Windows

cd android 

.\gradlew cleanBuildCache

并尝试运行它

react-native run-android

未定义不是对象（评估“ RNGestureHandlerModule.State”

20 个答案: