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

Question

我刚刚安装了 React Navigation 版本 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 导航希望构建应用程序

Answer 1

有两种方法可以解决

在你的 json 包中有一个名为 "react-native-reanimated": "^2.3.0" 的包，删除这个包并安装 "react-native-reanimated": "^2.2. 4

然后重启 metro 然后重新构建

第二种方式

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

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-native-gesture-handler 的安装，请在您的入口文件的顶部添加以下内容（确保它在顶部并且之前没有其他内容），例如 index.js 或 App.js

进口'react-native-gesture-handler';

全部保存并重建（ Android 是：npx react-native 运行-android ）

我的package.json

"@react-navigation/drawer": "^6.1.8" "@react-navigation/native": "^6.0.6" "@react-navigation/native-堆栈": "^6.2.5" “本机反应”：“0.66.4” “react-native-gesture-handler”：“^2.1.0”

我用第一种方法解决了

Answer 2

为我做一些改动

步骤：1 npm i react-native-reanimated（如果还没有，请添加）
并将 Reanimated 的 babel 插件添加到您的 babel.config.js

      ...
      plugins: [
          ...
          'react-native-reanimated/plugin',
      ],
  };

步骤：2 通过编辑 android/app/build.gradle

打开 Hermes 引擎

  enableHermes: true  // <- here

步骤：3 插件在 MainApplication.java

中恢复

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

      @Override
      protected String getJSMainModuleName() {
        return "index";
      }

      @Override
      protected JSIModulePackage getJSIModulePackage() {
        return new ReanimatedJSIModulePackage(); // <- add
      }
    };
  ...

如果更改已完成，现在清理并重建

For more Information 和 Compare steps

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

How to resolve React native navigation Error while installing version 6

react-native

react-navigation

react-navigation-drawer

react-navigation-stack

react-navigation-v5