Question

我刚开始使用React Native，我想使用React Navigator转到新的屏幕。我遵循了文档here，但仍然遇到问题。

我下面有一个App Navigator文件

import { createStackNavigator } from 'react-navigation';
import LandingPage from './src/components/LandingPages/LandingPage';

const AppNavigator = createStackNavigator({
  Home: { screen: LandingPage },
});

export default AppNavigator;

我的App.js文件是

    /**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 * @lint-ignore-every XPLATJSCOPYRIGHT1
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import AppNavigator from './AppNavigator';

type Props = {};
export default class App extends Component {
  render() {
    return (
   <AppNavigator/>

   );
  }
}

但是，我得到下面的错误。

null is not an object (evaluating 'RNGestureHandlerModule.State')

<unknown>
GestureHandler.js:55:37
loadModuleImplementation
require.js:321:6
<unknown>
Swipeable.js:11
loadModuleImplementation
require.js:321:6
<unknown>
index.js:1
loadModuleImplementation
require.js:321:6
<unknown>
StackViewLayout.js:19
loadModuleImplementation
require.js:321:6
<unknown>
StackView.js:4
loadModuleImplementation
require.js:321:6
<unknown>
createStackNavigator.js:3
loadModuleImplementation
require.js:321:6
createStackNavigator
index.js:9:18
createStackNavigator
react-navigation.js:107:45
<unknown>
AppNavigator.js:4:21
loadModuleImplementation
require.js:321:6
<unknown>
App.js:13
loadModuleImplementation
require.js:321:6
<unknown>
index.js:7
loadModuleImplementation
require.js:321:6
guardedLoadModule
require.js:199:45
global code
<unknown file>:0

我也尝试过

删除node_modules和package-lock.json
npm安装
npm install-保存反应导航
npm install-保存react-native-gesture-handler
本机链接

但是我仍然遇到相同的错误。任何人有任何想法吗？

编辑

这是在ios中发生的

编辑

Package.json

    {
      "name": "AppName",
      "version": "0.0.1",
      "private": true,
      "scripts": {
      "start": "node node_modules/react-native/local-cli/cli.js start",
,     "test": "jest"
      },
     "dependencies": {
     "react": "16.6.3",
     "react-native": "0.58.4",
     "react-native-gesture-handler": "^1.0.15",
     "react-navigation": "^3.2.1"
   },
    "devDependencies": {
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "24.1.0",
    "jest": "24.1.0",
    "metro-react-native-babel-preset": "0.51.1",
    "react-test-renderer": "16.6.3"
   },
   "jest": {
   "preset": "react-native"
 }

}

Answer 1

如果它在android中，那么请确保在链接软件包检查documentation

之后将这些更改添加到MainActivity.java

+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
.
.
.
+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }

通常是问题所在。

Answer 2

对于Andriod，您必须对MainActivity.java进行更改对于iOS 将此添加到您的Podfile：

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

你很好！

Answer 3

我弄清楚了问题所在。我没有正确使用StackNavigator，也没有正确安装和衬砌GestureHandler。

我创建了一个新项目，将旧文件复制到其中，并更改了Navigator类，它开始正常工作。

sampleWithRename.txt

Answer 4

此问题的最常见原因不是重建应用程序。请按照以下步骤

关闭metro builder终端窗口
再次运行react-native run-ios（或在遇到Android问题时运行android）。

如果这不能解决您的问题

尝试从设备中删除该应用。
再次运行react-native run-ios。

如果您使用的是android系统，则此问题仍未解决，请检查您的MainActivity.java是否与安装说明中提供的匹配。

导航到新页面

4 个答案: