createStackNavigator 导致 null 不是对象（评估 '_RNGestureHandlerModule.default.direction），即使它没有被使用答案

【问题标题】：createStackNavigator is causing null is not an object(evaulating '_RNGestureHandlerModule.default.direction) even if it's not usedcreateStackNavigator 导致 null 不是对象（评估 '_RNGestureHandlerModule.default.direction），即使它没有被使用
【发布时间】：2019-11-06 08:03:52
【问题描述】：

我正在尝试熟悉最新版本的 react-navigation。我制作了一个默认的 react-native 项目版本 0.60.0。我注意到当我添加时：

从 'react-navigation-stack' 导入 { createStackNavigator }；

它立即使应用程序崩溃并给我错误消息：

null 不是对象（评估 '_RNGestureHandlerModule.defaultDirection)

即使我只导入 createStackNavigator，我也会收到此错误消息。如果注释掉导入，则应用正常运行。

我的 package.json 看起来像这样

{
  "name": "awesome",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "16.8.6",
    "react-native": "0.60.0",
    "react-native-gesture-handler": "^1.5.0",
    "react-native-reanimated": "^1.4.0",
    "react-native-screens": "1.0.0-alpha.23",
    "react-navigation": "^4.0.10",
    "react-navigation-stack": "1.5.1",
    "@react-navigation/core": "^3.5.0",
    "@react-navigation/native": "^3.6.2"
  },
  "devDependencies": {
    "@babel/core": "^7.7.0",
    "@babel/runtime": "^7.7.1",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-jest": "^24.9.0",
    "eslint": "^6.6.0",
    "jest": "^24.9.0",
    "metro-react-native-babel-preset": "^0.57.0",
    "react-test-renderer": "16.8.6"
  },
  "jest": {
    "preset": "react-native"
  }
}

我的 App.js 文件是标准的 App 文件，只有两个额外的导入行。

【问题讨论】：

您是否在 ios 文件夹中安装了 pod？
这适用于安卓系统。我还没接触过iOS。

标签： react-native react-native-navigation

【解决方案1】：

确保你已经安装

yarn add react-navigation
yarn add react-native-gesture-handler react-native-reanimated

然后更新 MainActivity.java

package com.reactnavigation.example;

import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "Example";
  }

+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
}

然后做：

cd android
gradlew clean
cd ..

然后照常做：

react-native run-android

【讨论】：

【解决方案2】：

您可以查看安装列表

    yarn add react-native-reanimated react-native-gesture-handler react-native-screens@^1.0.0-alpha.23.

要在 iOS 上完成链接，请确保您已安装 Cocoapods。然后运行：

    cd ios
    pod install
    cd ..

要完成为Android 安装react-native-screens，请将以下两行添加到android/app/build.gradle: 的依赖项部分

    implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
    implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'

要完成为Android 安装react-native-gesture-handler，请对MainActivity.java: 进行以下修改

    package com.reactnavigation.example;

    import com.facebook.react.ReactActivity;
    + import com.facebook.react.ReactActivityDelegate;
    + import com.facebook.react.ReactRootView;
    + import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

    public class MainActivity extends ReactActivity {

      @Override
      protected String getMainComponentName() {
        return "Example";
      }

    +  @Override
    +  protected ReactActivityDelegate createReactActivityDelegate() {
    +    return new ReactActivityDelegate(this, getMainComponentName()) {
    +      @Override
    +      protected ReactRootView createRootView() {
    +       return new RNGestureHandlerEnabledRootView(MainActivity.this);
    +      }
    +    };
    +  }
    }

【讨论】：