web-dev-qa-db-ja.com

インバリアント違反：requireNativeComponent： "RNCSafeAreaView"がUIManagerに見つかりませんでした。 expoアプリとネイティブで反応

私の職場では、万博のレガシーネイティブアプリを使用しています。 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>
  );
}

今、私は以下のエラーがあります：

インバリアント違反：requireNativeComponent： "RNCSafeAreaView"がUIManagerに見つかりませんでした。

私はそれを修正するために丸一日を費やしましたが、これまでのところ解決策を見つけることができませんでした。

Androidまたはiosフォルダがありません。ポッドを使用していません。

私の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.
react-nativeexporeact-navigationreact-native-safe-area-view
2
Adi Elisha

34を超えるSDKバージョンをアップグレードしてみてください。react-native-safe-area-view最新バージョンが原因である可能性があります

これをチェックして：

https://forums.expo.io/t/invariant-violation-requirenativecomponent-rncsafeareaview-was-not-found-in-the-uimanager/31996

お役に立てれば！

1
user12129132

これがお役に立てば幸いです。私も同じ問題に直面しましたが、解決しました。ちょうど手順：

npm install -g expo-cli

update expo
0
Inzamamul Haque