Invarianter Verstoß: „main“ wurde nicht registriert

Neu bei React Native:

Ich habe ein brandneues Projekt mit Expo init gestartet und bin dann den Anweisungen unter https://reactnavigation.org/docs/hello-react-navigation gefolgt

Ich führe das Projekt mit expo start aus und erhalte diese Fehlermeldung. Invarianter Verstoß: „main“ wurde nicht registriert. Dies kann passieren, wenn:

• Metro (der lokale Entwicklungsserver) wird aus dem falschen Ordner ausgeführt. Überprüfen Sie, ob Metro ausgeführt wird, stoppen Sie es und starten Sie es im aktuellen Projekt neu.
• Ein Modul konnte aufgrund eines Fehlers nicht geladen werden AppRegistry.registerComponent wurde nicht angerufen.

invariant
    browser.js:38:14
runApplication
    AppRegistry.js:193:13
__callFunction
    MessageQueue.js:425:19
__guard$argument_0
    MessageQueue.js:112:6
__guard
    MessageQueue.js:373:10
callFunctionReturnFlushedQueue
    MessageQueue.js:111:4
callFunctionReturnFlushedQueue
    [native code]:0

Irgendwelche Vorschläge?

Öffne das index.jsder Inhalt der Datei sollte so aussehen:

import { AppRegistry, Platform } from 'react-native';
import App from './App';

AppRegistry.registerComponent('X', () => App);

if (Platform.OS === 'web') {
    const rootTag = document.getElementById('root') || document.getElementById('X');
    AppRegistry.runApplication('X', { rootTag });
}

Wenn Sie diesen Fehler haben Invariant Violation: “main” has not been registered Du musst das ersetzen 'X' von 'main'.

Ein anderes Beispiel :

Wenn Sie diesen Fehler haben Invariant Violation: “app” has not been registered Du musst das ersetzen 'X' von 'app'.

Für Android :

Offen ./android/app/src/main/java/[multiple folders]/MainActivity.java

/**
   * Returns the name of the main component registered from JavaScript.
   * This is used to schedule rendering of the component.
   */
  @Override
  protected String getMainComponentName() {
    return "X";
  }

Der 'X' von MainActivity.java Und index.js muss passen.

Das hat bei mir funktioniert:

1. Löschen Sie node_modules und Ihre Sperrdatei (package-lock.json / Yarn.lock)
2. Ändern Sie die Expo-Paketversion in package.json in 38.0.8
3. Führen Sie „garn“ oder „npm install“ aus
4. Führen Sie Expo Install React-Native-Safe-Area-Context aus

Das Problem ist, dass Sie bei Verwendung von expoComponent anders registrieren müssen. Alle Informationen finden Sie in den Dokumenten. https://docs.expo.io/versions/latest/sdk/register-root-component/

import { registerRootComponent } from 'expo';
import React from 'react';
import { View } from 'react-native';

class App extends React.Component {
  render() {
    return <View />;
  }
}

registerRootComponent(App);

In meinem Fall wurde das Problem gelöst, als ich anrief

AppRegistry.registerComponent(appName.toLowerCase(), () => App);

in index.js. Es sieht also so aus, als ob der erste Parameter basierend auf der angezeigten Fehlermeldung übergeben werden muss. In meinem Fall war mein Projektname AwesomeProject und der von Metro gemeldete Fehler war:

Invariant Violation: "awesomeproject" has not been registered.

Also dachte ich, dass das Hinzufügen von toLowerCase() das Problem lösen würde, und das tat es!!

Dieses Problem trat jedoch auf, als ich versuchte, es unter macOS auszuführen npx react-native run-macos und nachdem das Problem gelöst war, habe ich versucht, die iOS-Version aufzurufen, und dann habe ich es bekommen Invariant Violation: "AwesomeProject" has not been registered.

Letztendlich habe ich beides zum Laufen gebracht, indem ich die App wie folgt zweimal registriert habe:

AppRegistry.registerComponent(appName, () => App);
AppRegistry.registerComponent(appName.toLowerCase(), () => App);

Das gleiche funktioniert auch mit npx react-native run-android.

index.js

AppRegistry.registerComponent("X", () => Root);

Wenn Sie mit diesem Problem konfrontiert sind Android Stellen Sie dann sicher, dass beides der Fall ist mainactivity.java Und index.js enthält das gleiche „X“

mainActivity.java

@Override
protected String getMainComponentName() {
   return "X";
}

Wenn Sie mit diesem Problem konfrontiert sind iOS Stellen Sie dann sicher, dass beides der Fall ist AppDelegate.m Und index.js enthält das gleiche „X“

AppDelegate.m

 RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"X" initialProperties:nil];

In meinem Fall fehlten mir einige Pakete, deren Installation obligatorisch ist.

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

Problemumgehung durch:

AppRegistry.registerComponent('main', () => App);