安装版本 6 时如何解决 React 本机导航错误答案

【问题标题】：How to resolve React native navigation Error while installing version 6安装版本 6 时如何解决 React 本机导航错误
【发布时间】：2022-01-16 22:55:03
【问题描述】：

我刚刚安装了反应导航版本 6，我收到以下错误

尝试在空对象引用上调用接口方法 boolean com.swmansion.reanimated.layoutReanimation.NativeMethodsHolder.isLayoutAnimationEnabled()

下面是我的代码

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */
import 'react-native-gesture-handler';
import React from 'react';

import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,

} from 'react-native';

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import Upload from './Screens/Upload';
import Display from './Screens/Display';

const Stack = createStackNavigator()

function App() {

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
        name='Screen_A'
        component={Upload}
        >


        </Stack.Screen>
        <Stack.Screen
        name='Screen_B'
        component={Display}
        >


        </Stack.Screen>
      </Stack.Navigator>
      

    </NavigationContainer>

  );
};

export default App;

这是我第一次使用 react-native 和 react-native 导航希望构建应用程序

【问题讨论】：

请提供 package.json 文件。或者如果您提供整个 repo 链接（将其放到 GitHub 之后）会更好
我花了 6 个小时解决了这个问题并发布了答案。谢谢大家的帮助——
太棒了........!!

标签： react-native react-navigation react-navigation-v5 react-navigation-stack react-navigation-drawer

【解决方案1】：

有两种方法可以解决。

在您的 json 包中有一个名为“react-native-reanimated”的包：“^2.3.0”，删除此包并安装“react-native-reanimated”：“^2.2.4”

重启metro然后再次构建

第二种方式

1° - 通过编辑 android/app/build.gradle 开启 Hermes 引擎

project.ext.react = [
  enableHermes: true  // <- here -- change false for true
]

2° - 在 MainApplication.java 中重新激活插件

android\app\src\main\java\com\<yourProjectName>\MainApplication.java

  import com.facebook.react.bridge.JSIModulePackage; // <- add this
  import com.swmansion.reanimated.ReanimatedJSIModulePackage; // <- add this
  ...
  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
  ...

      @Override
      protected String getJSMainModuleName() {
        return "index";
      }
// add more this "Override" below <----------------
      @Override 
      protected JSIModulePackage getJSIModulePackage() {
        return new ReanimatedJSIModulePackage(); // <- add
      }
    };
  ...

在所有过程之后 React 导航文档要完成 react-native-gesture-handler 的安装，请在入口文件的顶部添加以下内容（确保它在顶部并且之前没有其他内容），例如 index.js 或 App.js

导入'react-native-gesture-handler';

全部保存并重建（安卓是：npx react-native run-android）

我的 package.json

"@react-navigation/drawer": "^6.1.8" "@react-navigation/native": "^6.0.6" “@react-navigation/native-stack”：“^6.2.5” “反应原生”：“0.66.4” "react-native-gesture-handler": "^2.1.0"

我用第一种方法解决了

【讨论】：

效果很好！