React-Native: l'application n'a pas été enregistrée erreur


166

Je suis actuellement en train de parcourir les tutoriels React-Native. J'ai commencé avec le didacticiel de mise en route, où j'ai créé un nouveau projet natif de réaction et réussi à exécuter le projet sur mon appareil.

J'ai ensuite commencé le didacticiel Props , j'ai copié l'extrait de code et essayé à nouveau d'exécuter le projet et le message d'erreur suivant s'affiche sur mon écran:


Pouvez-vous partager votre code?
Jagadish Upadhyay

Réponses:


435

Je suppose que c'est une erreur causée par un nom de projet différent de celui de votre composant enregistré.

Vous avez lancé un projet avec un seul nom, c.-à-d.

react-native init AwesomeApp

Mais dans votre fichier index.ios.js, vous enregistrez un autre composant

AppRegistry.registerComponent('Bananas', () => Bananas);

Quand ça doit être

AppRegistry.registerComponent('AwesomeApp', () => Bananas);

Essayez de le réparer.


7
"Bananes" comment fonctionne pour Android. Mais ce n'est pas le cas sur IOS.
Sumit Kushwaha

92
Pour une personne confrontée au même problème même si le nom du composant correspond -> Assurez-vous qu'aucun autre processus react-native / node ne s'exécute dans un autre terminal.
Nilesh

1
d'après mon expérience, un redémarrage du système a trié les choses ... aussi étrange que cela puisse paraître.
Kayote

Le tutoriel s'appelle actuellement "AwesomeProject"
AdamG

2
et pour les personnes qui veulent des bananes au lieu d'AwesomeApp peuvent changer la moduleName:@"AwesemeApp"ligne dans leur fichier AppDelegate.m
Aequitas

42

La plupart du temps, le problème est que vous avez un autre react-native startserveur (c'est-à-dire React Native Packager) fonctionnant soit sur un autre terminal, soit sur un autre onglet de TMUX (si vous utilisez TMUX).

Vous devez trouver ce processus et le fermer, donc après avoir exécuté react-native run-iospar exemple, il établira un nouveau serveur de packager qui sera enregistré pour cette application spécifique.

Trouvez simplement ce processus en utilisant:

ps aux | grep react-native

trouvez l'ID de processus (PID) et tuez le processus de packager en utilisant la killcommande (par exemple kill -9 [PID]). Vous devriez trouver l' launchPackager.commandapplication dans macOS, pas sûr des autres systèmes d'exploitation.

Ensuite, essayez à nouveau d'exécuter le run-ios(ou Android). Vous devriez pouvoir voir le nouveau chemin après avoir exécuté le nouveau serveur de packager, par exemple:

Looking for JS files in
   /Users/afshin/Desktop/awesome-app 

Cela fonctionne, même si je cours react-native start --port <otherport>, dois-je courir react-native run-<platform>d'une autre manière?, Merci
Sebastian Palma

@ SebastiánPalma pour autant que je sache, la startcommande exécute le serveur du packager donc si vous avez déjà compilé votre application, il n'est pas nécessaire de faire le run-<platform>.
Afshin Mehrabani

32

Modifiez MainActivitycomme ça,

@Override
protected String getMainComponentName() {
    return "Bananas"; // here
}

2
EXACTEMENT! c'était exactement ce qu'était mon problème, bien qu'au lieu de modifier cela, j'ai modifié le AppRegistry.registerComponent en cela
Sijav

qu'en est-il d'Ios?
Dinesh R Rajput

+1. Je me demande pourquoi la CLI me demande si je veux donner un nom différent à la version android / ios alors que cela conduira seulement à ce que mon projet ne fonctionne pas et que je doive le modifier.
Touchez

J'avais modifié app.js
rouleau

28

Ma solution est de changer le nom du module dans "AppDelegate.m"

de moduleName:@"AwesomeProject"

à moduleName:@"YourNewProjectName"


Cela a résolu mon problème. Merci!
Cory McAboy

J'ai travaillé pour moi en exécutant le simulateur iOS de React Native!
Emilio

Oui, ça m'aide. Un conseil supplémentaire: si vous utilisez XCode, assurez-vous que vous avez défini le bon nom sur votre nom d'application (Projet -> Cible -> DisplayName)
suther

17

Tout d'abord, vous devez démarrer votre application:

react-native start

Ensuite, vous devez définir le nom de votre application comme premier argument de registerComponent.

Ça fonctionne bien.

AppRegistry.registerComponent('YourProjectName', () => YourComponentName);

8

Veuillez vérifier votre fichier app.json dans le projet. s'il n'y a pas de ligne appKey, vous devez l'ajouter

{
  "expo": {
    "sdkVersion": "27.0.0",
    "appKey": "mydojo"
  },
  "name": "mydojo",
  "displayName": "mydojo"
}

3
Je me suis mêlé de cette erreur au cours des dernières 24 heures. Cela a résolu mon problème. Merci!
Balaji Kartheeswaran

7

Dans mon cas, il y a cette ligne dans MainActivity.java qui a été manquée lorsque j'ai utilisé react-native-renamecli (de NPM)

protected String getMainComponentName() {
    return "AwesomeApp";
}

De toute évidence, vous devez le renommer avec le nom de votre application.


4

Je pense que le serveur de nœuds fonctionne à partir d'un autre dossier. Alors tuez-le et exécutez dans le dossier actuel.

Rechercher le serveur de nœuds en cours d'exécution: -

lsof -i :8081

Tuez le serveur de nœuds en cours d'exécution: -

kill -9 <PID>

Par exemple:-

kill -9 1653

Démarrez le serveur de nœuds à partir du dossier natif react actuel: -

react-native run-android


3

J'ai eu le même problème et pour moi, la cause première était que j'ai exécuté (démarrage de réaction native) le packager à partir d'un autre dossier de réaction native (AwesomeApp), tandis que j'ai créé un autre projet dans un autre dossier.

L'exécution du packager à partir du répertoire de la nouvelle application l'a résolu.


1

Cela peut également être dû au fait que le nom du composant racine commence par des minuscules.

Corrigez-le ou créez à nouveau le projet avec un nom PascalCase.

Par exemple, allumez un nouveau HelloWord


1

Toutes les réponses données n'ont pas fonctionné pour moi.

J'ai eu un autre processus de nœud en cours d'exécution dans un autre terminal, j'ai fermé ce terminal de commande et tout a fonctionné comme prévu.


1

vous devez l' enregistrer dans index.android.js / index.ios.js

comme ça:

'use strict';

import {
    AppRegistry
} from 'react-native';

import app from "./app";

AppRegistry.registerComponent('test', () => app);

1

J'ai résolu ce problème en modifiant ce qui suit dans le fichier app.json. Il semble que la lettre majuscule lançait cette erreur.

De:

{
  "name": "Nameofmyapp",
  ...
}

À:

{
  "name": "nameofmyapp",
  ...
}

0

Plutôt que de changer le nom en AppRegistry ,

Exécutez les bananes init natives de réaction, cela créera un code standard de réaction pour le projet Bananas et AppRegistry.registerComponentpointera automatiquement vers les bananes

AppRegistry.registerComponent('Bananas', () => Bananas);

0

Aucune des solutions n'a fonctionné pour moi. J'ai dû tuer le processus suivant et relancer react-native run-android et cela a fonctionné.

node ./local-cli/cli.js start


1
quels processus suivants?
bigmadwolf

@bigmadwolf node ./local-cli/cli.js start
G. Thabit

0

J'ai eu le même problème. J'utilisais Windows pour créer une application native de réaction pour Android et j'avais la même erreur. Voici ce qui a fonctionné.

  • Accédez au dossier ANDROID dans votre racine.
  • Créez un fichier avec le nom: local.properties
  • Ouvrez-le dans l'éditeur et écrivez:

sdk.dir = C: \ Utilisateurs USERNAME \ AppData \ Local \ Android \ sdk

  • Remplacez USERNAME par le nom de votre machine.

Enregistrez et exécutez l'application normalement. Cela a fonctionné pour moi.


0

Le problème apparaîtra également lorsque, dans index.js, vous avez nommé l'application différemment du nom que vous lui avez donné pour le package android / ios ; cela s'est probablement produit lorsque vous avez éjecté l'application. Assurez-vous donc que lors de l'appel AppRegistry.registerComponent('someappname', () => App), someappname est également utilisé pour les packages natifs ou vice versa.


0

J'ai compris où se trouvait le problème dans mon cas (système d'exploitation Windows 10), mais cela pourrait également aider sous Linux (vous pouvez essayer).

Dans windows power shell, lorsque vous souhaitez exécuter une application (première fois après le démarrage du PC) en exécutant la commande suivante,

react-native run-android

Il démarre un node process/JS serverdans un autre console panelet vous ne rencontrez pas cette erreur. Mais, quand vous voulez exécuter une autre application , vous devez devoir fermer que déjà en cours d' exécution JS server console panel . Et puis exécutez la même commande pour une autre application à partir de power shell, cette commande démarrera automatiquement un autre nouveau serveur JS pour cette application, et vous ne rencontrerez pas cette erreur.

Vous n'avez pas besoin de fermer et de rouvrir power shell pour exécuter une autre application, vous devez fermer node console pour exécuter une autre application.


0

Après avoir lu tout ce qui précède, j'ai trouvé qu'il pourrait y avoir une autre raison à cela.

Dans mon cas:

react-native-cli: 2.0.1

natif de réaction: 0,60,4

et structure suivante:

entrez la description de l'image ici

Il faut tout d'abord noter que index.android n'a pas été mis à jour dans Android Studio lorsque la construction est exécutée par Metro builder (react-native run-android), donc cela doit être fait manuellement. Aussi dans le studio Android ne "lit" pas le

app.json (créé par défaut avec index.js, qui a renommé index.android.js):

 {
    "name": "authApp",
    "displayName": "authApp"
 }

et ainsi de suite

(dans mon cas)

import {authApp as appName} from './app.json';

cause le fait qu'Android Studio ne sait pas à quoi se réfère authApp. Je corrige pour le moment en faisant référence au nom de l'application avec son nom de chaîne et en n'utilisant pas cette importation depuis app.json:

AppRegistry.registerComponent('authApp', () => MyApp);

0

Cela l'a résolu pour moi

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

Donc mon index.jsdossier

import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('main', () => App);

Et mon package.jsondossier:

"dependencies": {
    "react": "^16.13.1",
    "react-dom": "~16.9.0",
    "react-native": "~0.61.5"
},

0

Cette solution a fonctionné pour moi après 2 jours de débogage. Change ça :

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

à

AppRegistry.registerComponent('main', () => App);
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.