React-Native: erro no aplicativo não foi registrado

166

Atualmente, estou passando pelos tutoriais do React-Native. Comecei com o tutorial de Introdução, onde criei um novo projeto nativo de reação e consegui executá-lo com êxito no meu dispositivo.

Iniciei o tutorial Props , copiei o trecho de código e tentei executar o projeto novamente e a seguinte mensagem de erro apareceu na minha tela:

Adão
fonte
Você pode compartilhar seu código?
Jagadish Upadhyay

Respostas:

435

Eu acho que é um erro causado por não corresponder o nome do projeto e o seu componente registrado.

Você iniciou o projeto com um nome, ou seja,

react-native init AwesomeApp

Mas no seu arquivo index.ios.js você registra outro componente

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

Quando deve ser

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

Tente consertar.

Slowyn
fonte
7
"Bananas" de alguma forma funciona para o Android. Mas isso não acontece no IOS.
Sumit Kushwaha
92
Para alguém que enfrenta o mesmo problema, mesmo que o nome do componente corresponda -> Verifique se você não tem nenhum outro processo react-native / node em execução em outro terminal.
Nilesh
1
da minha experiência, uma reinicialização do sistema classificou as coisas ... por mais estranho que pareça.
Kayote
O tutorial está atualmente chamado de "AwesomeProject"
AdamG
2
e para pessoas que querem Bananas vez de AwesomeApp pode alterar a moduleName:@"AwesemeApp"linha em seu arquivo AppDelegate.m
Aequitas
42

Na maioria das vezes, o problema é que você tem outro react-native startservidor (por exemplo, React Native Packager) em execução em outro terminal ou em outra guia do TMUX (se você estiver usando o TMUX).

Você precisa encontrar esse processo e fechá-lo; portanto, após a execução, react-native run-iospor exemplo, ele estabelecerá um novo servidor de empacotador registrado para esse aplicativo específico.

Basta encontrar esse processo usando:

ps aux | grep react-native

encontre a identificação do processo (PID) e mate o processo do empacotador usando o killcomando (por exemplo kill -9 [PID]). Você deve encontrar o launchPackager.commandaplicativo no macOS, sem ter certeza dos outros sistemas operacionais.

Em seguida, tente executar o run-ios(ou android) novamente. Você poderá ver o novo caminho depois de executar o novo servidor de empacotador, por exemplo:

Looking for JS files in
   /Users/afshin/Desktop/awesome-app 
Afshin Mehrabani
fonte
Ele funciona, mesmo se eu correr react-native start --port <otherport>, eu deveria correr react-native run-<platform>de outra maneira ?, graças
Sebastian Palma
@ SebastiánPalma, tanto quanto eu sei, o startcomando executa o servidor de empacotador, portanto, se você já compilou seu aplicativo, não há necessidade de fazê-lo run-<platform>.
Afshin Mehrabani
31

Modifique MainActivityassim,

@Override
protected String getMainComponentName() {
    return "Bananas"; // here
}
Daniyar Saumbayev
fonte
2
EXATAMENTE! que foi exatamente o que o meu problema era, embora em vez de modificar isso eu tenha modificado o AppRegistry.registerComponent para que
Sijav
e o Ios?
Dinesh R Rajput
+1. Me pergunto por que a CLI pergunta se eu quero dar um nome diferente à versão do Android / iOS quando isso fará com que meu projeto não funcione e eu precise alterá-la novamente.
Toque
Eu tinha modificado app.js
lançamento
28

Minha solução é alterar o nome do módulo em "AppDelegate.m"

de moduleName:@"AwesomeProject"

para moduleName:@"YourNewProjectName"

user8637708
fonte
Isso corrigiu meu problema. Obrigado!
Cory McAboy
Trabalhou para mim executando o simulador iOS do React Native!
Emilio
Sim, isso me ajuda. Uma dica adicional: Se você usar XCode, certifique-se, você definiu o nome certo para o seu App-Name (Project -> Target -> DisplayName)
Suther
17

Antes de tudo, você deve iniciar seu aplicativo:

react-native start

Em seguida, você deve definir o nome do aplicativo como o primeiro argumento de registerComponent.

Funciona bem.

AppRegistry.registerComponent('YourProjectName', () => YourComponentName);
Rafael Ferraro
fonte
8

Por favor, verifique seu arquivo app.json no projeto. se não houver appKey de linha, você deve adicioná-lo

{
  "expo": {
    "sdkVersion": "27.0.0",
    "appKey": "mydojo"
  },
  "name": "mydojo",
  "displayName": "mydojo"
}
mperk
fonte
3
Interveio com esse erro nas últimas 24 horas. Isso corrigiu meu problema. Obrigado!
Balaji Kartheeswaran 30/11
7

No meu caso, há esta linha no MainActivity.java que estava faltando quando eu usei o react-native-renamecli (do NPM)

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

Obviamente, você deve renomeá-lo para o nome do seu aplicativo.

xemasiv
fonte
4

Eu acho que o servidor do nó está sendo executado em outra pasta. Então mate-o e corra na pasta atual.

Encontre o servidor do nó em execução: -

lsof -i :8081

Mate o servidor do nó em execução: -

kill -9 <PID>

Por exemplo:-

kill -9 1653

Inicie o servidor do nó da pasta nativa de reação atual: -

react-native run-android

Arshid KV
fonte
3

Eu tive o mesmo problema e, para mim, a causa raiz foi que eu executei (reativar nativo) o empacotador de outra pasta reativa nativa (AwesomeApp), enquanto criava outro projeto em outra pasta.

A execução do empacotador no diretório do novo aplicativo o resolveu.

la5zl0
fonte
1

Isso também pode ocorrer porque o nome do componente raiz começa com letras minúsculas.

Corrija-o ou crie o projeto novamente com o nome PascalCase.

por exemplo, acenda o novo HelloWord

Venkat
fonte
1

Todas as respostas dadas não funcionaram para mim.

Eu tinha outro processo de nó em execução em outro terminal, fechei o terminal de comando e tudo funcionou conforme o esperado.

Khemraj
fonte
1

você precisa registrá- lo em index.android.js / index.ios.js

como isso:

'use strict';

import {
    AppRegistry
} from 'react-native';

import app from "./app";

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

Resolvi isso alterando o seguinte no arquivo app.json. Parece que a letra maiúscula estava lançando esse erro.

De:

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

Para:

{
  "name": "nameofmyapp",
  ...
}
Alex Sarnowski
fonte
0

Em vez de alterar o nome em AppRegistry ,

Execute o init-nativo react Bananas, isso criará um código padrão para o projeto Bananas e AppRegistry.registerComponentapontará automaticamente para bananas

AppRegistry.registerComponent('Bananas', () => Bananas);
vipul srivastav
fonte
0

Nenhuma das soluções funcionou para mim. Eu tive que matar o processo a seguir e executar novamente o react-native run-android e funcionou.

nó ./local-cli/cli.js start

G. Thabit
fonte
1
quais processos a seguir?
bigmadwolf 20/02/19
@bigmadwolf node ./local-cli/cli.js start
G. Thabit
0

Eu tive o mesmo problema. Eu estava usando o Windows para criar um aplicativo nativo react para android e estava tendo o mesmo erro. Aqui está o que funcionou.

  • Navegue até a pasta ANDROID na sua raiz.
  • Crie um arquivo com o nome: local.properties
  • Abra-o no editor e escreva:

sdk.dir = C: \ Usuários \ USERNAME \ AppData \ Local \ Android \ sdk

  • Substitua USERNAME pelo nome da sua máquina.

Salve e execute o aplicativo normalmente. Isso funcionou para mim.

Utsav Chawla
fonte
0

O problema também aparecerá quando, em index.js, você nomear o aplicativo de maneira diferente do nome que você deu para o pacote android / ios ; provavelmente isso aconteceu quando você ejetou o aplicativo. Portanto, certifique-se de que, ao chamar AppRegistry.registerComponent('someappname', () => App), someappname também seja usado para os pacotes nativos ou vice-versa.

Gabriel P.
fonte
0

Eu descobri onde estava o problema no meu caso (Windows 10 OS), mas também poderia ajudar no Linux (você pode tentar).

Em windows power shell, quando você deseja executar um aplicativo (primeira vez após a inicialização do PC) executando o seguinte comando,

react-native run-android

Ele inicia um node process/JS serverem outro console panele você não encontra esse erro. Mas, quando você deseja executar outro aplicativo , você deve precisar fechar que já está em execução JS server console panel . E, em seguida, execute o mesmo comando para outro aplicativo a partir de power shell, esse comando iniciará automaticamente outro novo servidor JS para esse aplicativo e você não encontrará esse erro.

Você não precisa fechar e reabrir power shell para executar outro aplicativo, precisa fechar node console para executar outro aplicativo.

Shamsul Arefin Sajib
fonte
0

Depois de ler todas as opções acima, descobri que poderia haver outra razão para isso.

No meu caso:

react-native-cli: 2.0.1

react-native: 0.60.4

e seguinte estrutura:

insira a descrição da imagem aqui

Primeiro, observe que index.android não foi atualizado no Android Studio quando a compilação é executada pelo construtor Metro (react-native run-android), portanto, isso deve ser feito manualmente. Também no Android studio não "lê" o

app.json (criado por padrão junto com index.js, que renomeou index.android.js):

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

e assim isso

(No meu caso)

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

causar o fato de que o android studio não sabe a que se refere o authApp. Corrijo no momento, referindo-me ao nome do aplicativo com o nome da string e não usando essa importação do app.json:

AppRegistry.registerComponent('authApp', () => MyApp);
Carmine Tambascia
fonte
0

Isso resolveu para mim

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

Então meu index.jsarquivo

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

E meu package.jsonarquivo:

"dependencies": {
    "react": "^16.13.1",
    "react-dom": "~16.9.0",
    "react-native": "~0.61.5"
},
Babajide M. Moibi
fonte
0

Esta solução funcionou para mim após 2 dias de depuração. Mude isso :

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

para

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