createStackNavigator导致null的对象不是一个对象（即使不使用_RNGestureHandlerModule.default.direction）

Question

我正在尝试使自己熟悉最新版本的反应导航。我已经将默认的本机项目版本设置为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文件，只有两条额外的导入行。

Answer 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

Answer 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 ..

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

    implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
    implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
要完成react-native-gesture-handler的Android的安装，请对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);
    +      }
    +    };
    +  }
    }