不变违规：requireNativeComponent：在 UIManager 中找不到“RNCSafeAreaView”。在 expo 应用程序中反应原生
Posted
技术标签:
【中文标题】不变违规：requireNativeComponent：在 UIManager 中找不到“RNCSafeAreaView”。在 expo 应用程序中反应原生【英文标题】：Invariant Violation: requireNativeComponent: "RNCSafeAreaView" was not found in the UIManager. in react-native with expo app 【发布时间】：2020-05-21 12:08:55 【问题描述】：所以在我的工作场所，我们在 expo 上有一个遗留的 react-native 应用程序。我使用 android 模拟器进行调试，它用于 android 设备上的内部工作人员。 我们有几个月没有碰它，当我们试图重建时，我们得到了一个错误。我不得不升级所有的库，因为它们中的大部分都已被弃用。
代码如下：
import * as React from "react";
import Text, View from "react-native";
import NavigationContainer from "@react-navigation/native";
import createStackNavigator from "@react-navigation/stack";
function Demo()
return (
<View
style= flex: 1, justifyContent: "space-between", alignItems: "center"
>
<Text>This is top text.</Text>
<Text>This is bottom text.</Text>
</View>
);
const Stack = createStackNavigator();
export default function App()
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home" headerMode="none">
<Stack.Screen name="Settings" component=Demo />
</Stack.Navigator>
</NavigationContainer>
);
现在，我有以下错误：
Invariant Violation：requireNativeComponent：在 UIManager 中找不到“RNCSafeAreaView”。
我花了一整天的时间来修复它，但到目前为止找不到解决方案。
我没有 android 或 ios 文件夹。我不使用 pod。
我的 package.json 是：
"name": "csr_amt",
"version": "0.0.1",
"private": true,
"devDependencies":
"@babel/core": "^7.9.0",
"@babel/runtime": "^7.9.0",
"babel-plugin-import": "1.13.0",
"jest-expo": "36.0.1",
"react-native-scripts": "2.0.1",
"react-native-version": "4.0.0",
"react-test-renderer": "16.13.0"
,
"main": "node_modules/expo/AppEntry.js",
"scripts":
"start": "expo start -c",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js --watchAll",
"postversion": "react-native-version --never-amend",
"postinstall": ""
,
"jest":
"preset": "jest-expo"
,
"dependencies":
"@react-native-community/async-storage": "^1.8.1",
"@react-native-community/masked-view": "^0.1.7",
"@react-navigation/compat": "^5.1.23",
"@react-navigation/native": "^5.4.2",
"@react-navigation/stack": "^5.3.9",
"antd-mobile": "2.3.1",
"axios": "0.19.2",
"expo": "33.0.0",
"expo-cli": "^3.13.1",
"lodash": "4.17.15",
"moment": "2.24.0",
"normalize-css-color": "^1.0.2",
"rc-form": "2.4.11",
"react": "16.13.0",
"react-dom": "16.13.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
"react-native-datawedge-intents": "0.1.2",
"react-native-elements": "1.2.7",
"react-native-gesture-handler": "^1.6.0",
"react-native-keyboard-aware-scroll-view": "0.9.1",
"react-native-navigation": "6.6.2",
"react-native-reanimated": "^1.7.0",
"react-native-safe-area-context": "0.6.0",
"react-native-safe-area-view": "^1.1.1",
"react-native-screens": "^2.2.0",
"react-navigation": "4.2.2",
"react-redux": "7.2.0",
"redux": "4.0.5",
"redux-persist": "6.0.0",
"redux-thunk": "2.3.0",
"seamless-immutable": "7.1.4"
完整的错误是：
Invariant Violation: requireNativeComponent: "RNCSafeAreaView" was not found in the UIManager.
This error is located at:
in RNCSafeAreaView (at src/index.tsx:26)
in SafeAreaProvider (at SafeAreaProviderCompat.tsx:42)
in SafeAreaProviderCompat (at StackView.tsx:428)
in RCTView (at View.js:45)
in View (at StackView.tsx:427)
in StackView (at createStackNavigator.tsx:82)
in StackNavigator (at App.js:123)
in EnsureSingleNavigator (at BaseNavigationContainer.tsx:309)
in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:64)
in ThemeProvider (at NavigationContainer.tsx:63)
in ForwardRef(NavigationContainer) (at App.js:122)
in App (at withExpoRoot.js:20)
in RootErrorBoundary (at withExpoRoot.js:19)
in ExpoRootComponent (at renderApplication.js:35)
in RCTView (at View.js:45)
in View (at AppContainer.js:98)
in RCTView (at View.js:45)
in View (at AppContainer.js:115)
in AppContainer (at renderApplication.js:34) handleException @ ExceptionsManager.js:74 showErrorDialog @ ReactNativeRenderer-dev.js:14654 logCapturedError @ ReactNativeRenderer-dev.js:14664 logError @ ReactNativeRenderer-dev.js:14770 callback @ ReactNativeRenderer-dev.js:15907 callCallback @ ReactNativeRenderer-dev.js:13857 commitUpdateEffects @ ReactNativeRenderer-dev.js:13901 commitUpdateQueue @ ReactNativeRenderer-dev.js:13892 commitLifeCycles @ ReactNativeRenderer-dev.js:15122 commitAllLifeCycles @ ReactNativeRenderer-dev.js:16635 invokeGuardedCallbackImpl @ ReactNativeRenderer-dev.js:93 invokeGuardedCallback @ ReactNativeRenderer-dev.js:318 commitRoot @ ReactNativeRenderer-dev.js:16875 (anonymous) @ ReactNativeRenderer-dev.js:18501 unstable_runWithPriority @ scheduler.development.js:653 completeRoot @ ReactNativeRenderer-dev.js:18498 performWorkOnRoot @ ReactNativeRenderer-dev.js:18427 performWork @ ReactNativeRenderer-dev.js:18324 performSyncWork @ ReactNativeRenderer-dev.js:18285 requestWork @ ReactNativeRenderer-dev.js:18169 scheduleWork @ ReactNativeRenderer-dev.js:17969 scheduleRootUpdate @ ReactNativeRenderer-dev.js:18642 updateContainerAtExpirationTime @ ReactNativeRenderer-dev.js:18676 updateContainer @ ReactNativeRenderer-dev.js:18765 render @ ReactNativeRenderer-dev.js:19512 renderApplication @ renderApplication.js:61 run @ AppRegistry.js:103 runApplication @ AppRegistry.js:198
__callFunction @ MessageQueue.js:366 (anonymous) @ MessageQueue.js:106
__guard @ MessageQueue.js:314 callFunctionReturnFlushedQueue @ MessageQueue.js:105 (anonymous) @ debuggerWorker.js:80 Show 3 more frames ExceptionsManager.js:82 Invariant Violation: Invariant Violation: requireNativeComponent: "RNCSafeAreaView" was not found in the UIManager.
This error is located at:
in RNCSafeAreaView (at src/index.tsx:26)
in SafeAreaProvider (at SafeAreaProviderCompat.tsx:42)
in SafeAreaProviderCompat (at StackView.tsx:428)
in RCTView (at View.js:45)
in View (at StackView.tsx:427)
in StackView (at createStackNavigator.tsx:82)
in StackNavigator (at App.js:123)
in EnsureSingleNavigator (at BaseNavigationContainer.tsx:309)
in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:64)
in ThemeProvider (at NavigationContainer.tsx:63)
in ForwardRef(NavigationContainer) (at App.js:122)
in App (at withExpoRoot.js:20)
in RootErrorBoundary (at withExpoRoot.js:19)
in ExpoRootComponent (at renderApplication.js:35)
in RCTView (at View.js:45)
in View (at AppContainer.js:98)
in RCTView (at View.js:45)
in View (at AppContainer.js:115)
in AppContainer (at renderApplication.js:34)
at invariant (blob:http://localhost:19003/96ae467f-40fc-4feb-b794-9cac89e35617:7493:17)
at getNativeComponentAttributes (blob:http://localhost:19003/96ae467f-40fc-4feb-b794-9cac89e35617:62205:5)
at blob:http://localhost:19003/96ae467f-40fc-4feb-b794-9cac89e35617:21723:14
at Object.exports.get (blob:http://localhost:19003/96ae467f-40fc-4feb-b794-9cac89e35617:45693:20)
at createInstance (blob:http://localhost:19003/96ae467f-40fc-4feb-b794-9cac89e35617:29809:56)
at completeWork (blob:http://localhost:19003/96ae467f-40fc-4feb-b794-9cac89e35617:36915:34)
at completeUnitOfWork (blob:http://localhost:19003/96ae467f-40fc-4feb-b794-9cac89e35617:39074:32)
at performUnitOfWork (blob:http://localhost:19003/96ae467f-40fc-4feb-b794-9cac89e35617:39237:18)
at workLoop (blob:http://localhost:19003/96ae467f-40fc-4feb-b794-9cac89e35617:39247:30)
at renderRoot (blob:http://localhost:19003/96ae467f-40fc-4feb-b794-9cac89e35617:39313:13) reactConsoleErrorHandler @ ExceptionsManager.js:82
__expoConsoleLog @ RemoteConsole.js:80 console.error @ YellowBox.js:59 error @ muteWarnings.fx.js:26 componentDidCatch @ RootErrorBoundary.js:56 proxiedMethod @ createPrototypeProxy.js:44 callback @ ReactNativeRenderer-dev.js:15908 callCallback @ ReactNativeRenderer-dev.js:13857 commitUpdateEffects @ ReactNativeRenderer-dev.js:13901 commitUpdateQueue @ ReactNativeRenderer-dev.js:13892 commitLifeCycles @ ReactNativeRenderer-dev.js:15122 commitAllLifeCycles @ ReactNativeRenderer-dev.js:16635 invokeGuardedCallbackImpl @ ReactNativeRenderer-dev.js:93 invokeGuardedCallback @ ReactNativeRenderer-dev.js:318 commitRoot @ ReactNativeRenderer-dev.js:16875 (anonymous) @ ReactNativeRenderer-dev.js:18501 unstable_runWithPriority @ scheduler.development.js:653 completeRoot @ ReactNativeRenderer-dev.js:18498 performWorkOnRoot @ ReactNativeRenderer-dev.js:18427 performWork @ ReactNativeRenderer-dev.js:18324 performSyncWork @ ReactNativeRenderer-dev.js:18285 requestWork @ ReactNativeRenderer-dev.js:18169 scheduleWork @ ReactNativeRenderer-dev.js:17969 scheduleRootUpdate @ ReactNativeRenderer-dev.js:18642 updateContainerAtExpirationTime @ ReactNativeRenderer-dev.js:18676 updateContainer @ ReactNativeRenderer-dev.js:18765 render @ ReactNativeRenderer-dev.js:19512 renderApplication @ renderApplication.js:61 run @ AppRegistry.js:103 runApplication @ AppRegistry.js:198
__callFunction @ MessageQueue.js:366 (anonymous) @ MessageQueue.js:106
__guard @ MessageQueue.js:314 callFunctionReturnFlushedQueue @ MessageQueue.js:105 (anonymous) @ debuggerWorker.js:80 Show 5 more frames ExceptionsManager.js:82 Warning: RootErrorBoundary: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI.
【问题讨论】：
【参考方案1】：尝试将您的 SDK 版本升级到 34 以上可能是因为 react-native-safe-area-view 最新版本
检查一下：
https://forums.expo.io/t/invariant-violation-requirenativecomponent-rncsafeareaview-was-not-found-in-the-uimanager/31996
希望这会有所帮助！
【讨论】：
以上是关于不变违规：requireNativeComponent：在 UIManager 中找不到“RNCSafeAreaView”。在 expo 应用程序中反应原生的主要内容，如果未能解决你的问题，请参考以下文章