requireNativeComponent：运行 Android 应用程序时，在 UIManager 中找不到“RNSScreenStackHeaderConfig”

Question

在 Android 上运行应用程序时，我收到此错误。它构建正确，但因异常而崩溃。我已经安装了 React-native-screens、@React-native/navigation 以及https://reactnavigation.org/docs/getting-started/上列出的依赖项

com.facebook.react.common.JavascriptException：不变违规：requireNativeComponent：在 UIManager 中找不到“RNSScreenStackHeaderConfig”。

This error is located at:
    in RNSScreenStackHeaderConfig
    in Unknown
    in RNSScreen
    in N
    in ForwardRef
    in y
    in E
    in RNSScreenStack
    in w
    in RNCSafeAreaProvider
    in Unknown
    in v
    in Unknown
    in Unknown
    in Unknown
    in ForwardRef
    in Unknown
    in ForwardRef
    in p
    in c
    in P
    in RCTView
    in View
    in RCTView
    in View
    in h, stack:

它在 iOS 上构建和运行良好，但在 Android 上运行时它完全崩溃。我在这里忽略了什么吗？

这是我的包 json。

{
  "name": "<myprojectname>",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint .",
    "postinstall": "npx jetify",
    "android:bundle:debug": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/"
  },
  "dependencies": {
    "@react-native-community/async-storage": "^1.8.1",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/native": "^6.0.2",
    "@react-navigation/native-stack": "^6.1.0",
    "@react-navigation/stack": "^6.0.7",
    "adbkit": "^2.11.1",
    "moment": "^2.24.0",
    "react": "16.9.0",
    "react-native": "0.63.0",
    "react-native-calendar-strip": "^1.4.1",
    "react-native-calendars": "^1.264.0",
    "react-native-firebase": "^5.6.0",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-reanimated": "^2.2.0",
    "react-native-safe-area-context": "^3.3.1",
    "react-native-screens": "3.1.1",
    "react-native-snap-carousel": "^3.8.4",
    "react-native-vector-icons": "^6.6.0",
    "react-navigation": "^4.4.4",
    "react-navigation-stack": "^2.10.4",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5"
  },
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "babel-jest": "24.9.0",
    "eslint": "^6.5.1",
    "jest": "24.9.0",
    "jetifier": "^1.6.5",
    "metro-react-native-babel-preset": "^0.66.2",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

我真的不知道如何解决这个问题，尝试删除缓存，重新启动metro，删除节点模块和所有“相关”错误。当我创建一个新项目并尝试安装和使用导航库时，甚至会发生此错误。

这是我的入口点，示例是从 React-navigation Snack 复制的。

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { enableScreens } from 'react-native-screens';

enableScreens(true);
function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function AppTest() {
  return (
    <NavigationContainer>
      <Stack.Navigator 
      screenOptions={{
        headerStyle: {
          backgroundColor: '#f4511e',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      }}
      initialRouteName="Home">
        <Stack.Screen  options={{ title: 'My home' }} name="Home" component={HomeScreen} />
        <Stack.Screen  options={{ title: 'My home' }} name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default AppTest;

有什么建议么？

Answer 1

如果有人在使用 nrwl/nx mono-repo 进行跨平台构建（移动和 Web）时遇到此问题，则除了工作区 package.json 之外，您还需要在移动应用程序 package.json 中添加 和react-native-screens依赖项。react-native-safe-area-context

Answer 2

我在 ios 上进行导航工作时遇到了这个问题。

我不确定到底是什么解决了这个问题。我重新安装了所有导航包并运行npx pod-install，清理了地铁缓存，构建数据，派生数据，错误消失了。

Answer 3

解决方案在reactnavigation文档中有

安装后@react-navigation/native您必须安装两个依赖项：

npm install react-native-screens react-native-safe-area-context

这是提及库。

注意： react-native-screens软件包需要一个额外的配置步骤才能在Android 设备上正常工作。编辑MainActivity.java文件位于

android/app/src/main/java/<your package name>/MainActivity.java.

将以下代码添加到 MainActivity 类的主体中：

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(null);
}

并确保在此文件的顶部添加导入语句：

import android.os.Bundle;

Answer 4

您只需要确保在 Windows 上安装堆栈后安装依赖项，运行以下代码：

npm install React-Native-Screens React-Native-safe-area-context

Answer 5

终止 Metro 并清理 gradle 构建（可能需要一两分钟）：

cd android
.\gradlew clean

启动 Metro 并清除缓存：

npm start --reset-cache

重新编译

npm run android

另外，请确保MainActivity.java您已添加import android.os.Bundle;以下内容package com.your_package_name。https://reactnavigation.org/docs/getting-started/上的描述对于某些人来说可能会建议将其放在该文件的最顶部，但这是错误的想法。它应该是这样的：

package com.your_package_name;
import android.os.Bundle;

Answer 6

我在编辑文件时遇到了同样的问题，MainActivity.java该文件位于以下react-navigation-getting-started-guideandroid/app/src/main/java/<your package name>/MainActivity.java 之后

你需要停止地铁服务器

然后运行react-native run-android

Answer 7

我遇到了同样的问题，我只是通过 xCode 重新加载了我的模拟器，它就工作了。

Answer 8

I encountered this problem after setting up navigation for ios. Here is the solution I found:

1. In the terminal, run npx pod-install ios because as explained in the docs, "If you're on a Mac and developing for iOS, you need to install the pods (via Cocoapods) to complete the linking."
2. Quit my simulator
3. Terminated and re-ran npx react-native start
4. Terminated and re-ran npx react-native run-ios

After completing these steps the app ran successfully again.

Answer 9

如果运行后问题仍然存在npm install react-native-screens react-native-safe-area-context，请尝试：

cd ios >> pod install and try react-native run-ios again

Answer 10

您是否进行了文档中给出的更改？根据此https://reactnavigation.org/docs/getting-started/ 您需要进行更改MainActivity.java位于android/app/src/main/java/<your package name>/MainActivity.java

将其添加到文件的最开头import android.os.Bundle;

然后添加@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(null); }

再次查看文档