React-Native: Błąd aplikacji nie został zarejestrowany


166

Obecnie przechodzę przez samouczki React-Native. Zacząłem od samouczka Getting Started, w którym stworzyłem nowy projekt natywny Reaguj i udało mi się uruchomić projekt na moim urządzeniu.

Następnie uruchomiłem samouczek dotyczący rekwizytów , skopiowałem fragment kodu i próbowałem ponownie uruchomić projekt, a na ekranie pojawił się następujący komunikat o błędzie:


Czy możesz udostępnić swój kod?
Jagadish Upadhyay,

Odpowiedzi:


435

Myślę, że jest to błąd spowodowany niedopasowaniem nazwy projektu i zarejestrowanego komponentu.

Zainicjowałeś projekt pod jedną nazwą, tj

react-native init AwesomeApp

Ale w pliku index.ios.js rejestrujesz inny komponent

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

Kiedy to musi być

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

Spróbuj to naprawić.


7
„Banany” trochę jak działa na Androida. Ale nie działa na IOS.
Sumit Kushwaha

92
Dla kogoś, kto boryka się z tym samym problemem, nawet jeśli nazwa komponentu jest zgodna -> Upewnij się, że nie masz żadnego innego procesu reagowania natywnego / węzła uruchomionego na innym terminalu.
Nilesh

1
z mojego doświadczenia wynika, że ​​ponowne uruchomienie systemu posortowało rzeczy ... tak dziwnie, jak się wydaje.
Kayote

Tutorial jest obecnie nazywany "AwesomeProject"
AdamG

2
a dla osób, które chcą Banany zamiast AwesomeApp, mogą zmienić moduleName:@"AwesemeApp"linię w swoim pliku AppDelegate.m
Aequitas

42

W większości przypadków problem polega na tym, że masz inny react-native startserwer (np. React Native Packager) działający albo na innym terminalu, albo na innej karcie TMUX (jeśli używasz TMUX).

Musisz znaleźć ten proces i zamknąć go, więc po uruchomieniu react-native run-iosna przykład ustanowi nowy serwer pakujący, który zarejestrował się dla tej konkretnej aplikacji.

Po prostu znajdź ten proces za pomocą:

ps aux | grep react-native

znajdź identyfikator procesu (PID) i zabij proces programu pakującego za pomocą killpolecenia (np kill -9 [PID].). Powinieneś znaleźć launchPackager.commandaplikację w systemie macOS, nie mając pewności co do innych systemów operacyjnych.

Następnie spróbuj ponownie uruchomić run-ios(lub Androida). Powinieneś być w stanie zobaczyć nową ścieżkę po uruchomieniu nowego serwera pakującego, np:

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

Działa, nawet jak biegnę react-native start --port <otherport>, czy powinienem biec react-native run-<platform>inaczej ?, dzięki
Sebastian Palma

@ SebastiánPalma, o ile wiem, startpolecenie uruchamia serwer pakujący, więc jeśli już skompilowałeś swoją aplikację, nie ma potrzeby wykonywania run-<platform>.
Afshin Mehrabani

31

Zmodyfikuj w MainActivityten sposób,

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

2
DOKŁADNIE! na tym właśnie polegał mój problem, chociaż zamiast modyfikować to, zmodyfikowałem AppRegistry.registerComponent tak, aby
Sijav,

a co z Ios?
Dinesh R Rajput

+1. Zastanawiam się, dlaczego CLI pyta, czy chcę nadać wersji Androida / iOS inną nazwę, skoro tylko doprowadzi to do tego, że mój projekt nie będzie działał i będę musiał go zmienić.
Dotknij

Zmodyfikowałem plik app.js
przewijam

28

Moje rozwiązanie to zmiana nazwy modułu w „AppDelegate.m”

z moduleName:@"AwesomeProject"

do moduleName:@"YourNewProjectName"


To rozwiązało mój problem. Dzięki!
Cory McAboy

Pracowałem dla mnie na symulatorze iOS z React Native!
Emilio

Tak, to mi pomaga. Dodatkowa wskazówka: jeśli korzystasz z XCode, upewnij się, że ustawiłeś właściwą nazwę na nazwę swojej aplikacji (Projekt -> Cel -> DisplayName)
suther

17

Przede wszystkim musisz rozpocząć swoją aplikację:

react-native start

Następnie musisz ustawić nazwę aplikacji jako pierwszy argument funkcji registerComponent.

To działa dobrze.

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

8

Sprawdź plik app.json w projekcie. jeśli nie ma linii appKey, musisz ją dodać

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

3
Wtrącałem się w ten błąd przez ostatnie 24 godziny. To rozwiązało mój problem. Dzięki!
Balaji Kartheeswaran

7

W moim przypadku jest ta linia w MainActivity.java, która została pominięta, gdy użyłem react-native-renamecli (z NPM)

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

Oczywiście musisz zmienić jego nazwę na nazwę swojej aplikacji.


4

Myślę, że serwer węzłów działa z innego folderu. Więc zabij go i uruchom w bieżącym folderze.

Znajdź działający serwer węzłów: -

lsof -i :8081

Zabij działający serwer węzłów: -

kill -9 <PID>

Na przykład:-

kill -9 1653

Uruchom serwer węzła z bieżącego folderu macierzystego reagowania: -

react-native run-android


3

Miałem ten sam problem i dla mnie główną przyczyną było to, że uruchomiłem (start natywny) program pakujący z innego folderu natywnego reagowania (AwesomeApp), podczas gdy utworzyłem inny projekt w innym folderze.

Uruchomienie programu pakującego z katalogu nowej aplikacji rozwiązało problem.


1

Może to być również spowodowane tym, że nazwa komponentu głównego zaczyna się od małych liter.

Popraw go, a raczej utwórz projekt jeszcze raz z nazwą PascalCase.

np. zapalić nowy HelloWord


1

Wszystkie podane odpowiedzi mi nie pomogły.

Miałem inny proces węzłowy działający na innym terminalu, zamknąłem ten terminal poleceń i wszystko działało zgodnie z oczekiwaniami.


1

musisz zarejestrować go w index.android.js / index.ios.js

lubię to:

'use strict';

import {
    AppRegistry
} from 'react-native';

import app from "./app";

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

1

Rozwiązałem ten problem, zmieniając następujące elementy w pliku app.json. Wygląda na to, że duża litera rzuca ten błąd.

Z:

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

Do:

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

0

Zamiast zmieniać nazwę w AppRegistry,

Uruchom responsywny init Bananas, utworzy to standardowy kod dla projektu Bananas i AppRegistry.registerComponentautomatycznie wskaże banany

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

0

Żadne z rozwiązań nie zadziałało dla mnie. Musiałem zabić następujący proces i ponownie uruchomić responsywny run-android i zadziałało.

node ./local-cli/cli.js start


1
jakie kolejne procesy?
bigmadwolf

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

0

Miałem ten sam problem. Używałem systemu Windows do tworzenia natywnej aplikacji na Androida i miałem ten sam błąd. Oto, co zadziałało.

  • Przejdź do folderu ANDROID w swoim katalogu głównym.
  • Utwórz plik o nazwie: local.properties
  • Otwórz go w edytorze i napisz:

sdk.dir = C: \ Users \ NAZWA UŻYTKOWNIKA \ AppData \ Local \ Android \ sdk

  • Zastąp NAZWA UŻYTKOWNIKA nazwą twojego komputera.

Zapisz i uruchom aplikację normalnie. To zadziałało dla mnie.


0

Problem pojawi się również, gdy w pliku index.js nazwa aplikacji różni się od nazwy, którą nadałeś jej pakietowi dla systemu Android / ios ; prawdopodobnie stało się tak po wyrzuceniu aplikacji. Więc upewnij się, że podczas wywoływania AppRegistry.registerComponent('someappname', () => App)someappname jest również używane dla pakietów natywnych lub odwrotnie.


0

Dowiedziałem się, gdzie był problem w moim przypadku (system operacyjny Windows 10), ale może to również pomóc w Linuksie (możesz spróbować).

W windows power shellprzypadku, gdy chcesz uruchomić aplikację (pierwszy raz po uruchomieniu komputera), wykonując następujące polecenie,

react-native run-android

Zaczyna się node process/JS serverw innym console paneli nie napotkasz tego błędu. Ale, jeśli chcesz uruchomić inną aplikację , to musi trzeba zamknąć , które już działa JS server console panel . Następnie wykonaj to samo polecenie dla innej aplikacji z power shell, to polecenie automatycznie uruchomi kolejny nowy serwer JS dla tej aplikacji i nie napotkasz tego błędu.

Nie musisz zamykać i ponownie otwierać, power shell aby uruchomić inną aplikację, musisz zamknąć, node console aby uruchomić inną aplikację.


0

Po przeczytaniu wszystkiego powyżej stwierdziłem, że może być inny powód.

W moim przypadku:

react-native-cli: 2.0.1

natywny: 0,60,4

i następującą strukturę:

wprowadź opis obrazu tutaj

Po pierwsze należy zauważyć, że index.android nie jest aktualizowany w Android Studio, gdy kompilacja jest uruchamiana przez Metro builder (react-native run-android), więc trzeba to zrobić ręcznie. Również w Android Studio nie "czyta"

app.json (utworzony domyślnie razem z index.js, którego nazwa została zmieniona na index.android.js):

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

i tak to lubię

(w moim przypadku)

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

powodują, że android studio nie wie, do czego odwołuje się authApp. Naprawiłem na chwilę odwołanie do nazwy aplikacji z jej nazwą w postaci ciągu znaków i nie używanie tego importu z app.json:

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

0

To rozwiązało to dla mnie

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

Więc moja index.jsteczka

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

I mój package.jsonplik:

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

0

To rozwiązanie zadziałało u mnie po 2 dniach debugowania. Zmień to :

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

do

AppRegistry.registerComponent('main', () => App);
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.