Android nie załadował pakietu JS

201

Próbuję uruchomić AwesomeProject na moim Nexus5 (Android 5.1.1).

Jestem w stanie zbudować projekt i zainstalować go na urządzeniu. Ale kiedy go uruchamiam, pojawia się czerwony ekran z napisem

Nie można pobrać pakietu JS. Czy zapomniałeś uruchomić serwer programistyczny lub podłączyć urządzenie?

W reakcji na natywnego iOS mogę wybrać ładowanie jsbundle offline. Jak mogę zrobić to samo dla Androida? (A przynajmniej, gdzie mogę skonfigurować adres serwera?)

Aktualizacja

Aby uruchomić z lokalnym serwerem, uruchom następujące polecenia w katalogu głównym projektu-macierzystego projektu

  1. react-native start > /dev/null 2>&1 &
  2. adb reverse tcp:8081 tcp:8081

proszę spojrzeć na odpowiedź dsissitka po więcej szczegółów.

Aby uruchomić bez serwera, spakuj plik js do apk, uruchamiając:

  1. utwórz folder zasobów pod android/app/src/main
  2. curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"

zapoznaj się z odpowiedzią kzzzf, aby uzyskać więcej informacji.

Mateusz
źródło
Stll jeszcze nie rozgryzł problemu. Tymczasem możesz wypróbować to na swoim symulatorze. Działa idealnie w mojej genymotion.
Bryan,
kiedy próbuję wpisać dwie komendy do uruchomienia z lokalnym serwerem, pojawia się błąd w PowerShell, mówiąc: „Znak ampersand (&) jest niedozwolony”. Zakładam, że powinienem znajdować się w katalogu głównym app-dir podczas uruchamiania polecenia?
user2236165,
1
Czy to oznacza, że ​​debugowanie przez USB na Androidzie 4.1 jest niemożliwe, ponieważ adb reversenie jest obsługiwane?
bonh 29.01.16
Chciałbym wspomnieć, że aby móc wykonać adb reverse tcp:8081 tcp:8081, potrzebujesz wersji ADB 1.0.32, reverseopcja nie jest dostępna w wersji 1.0.31
dniu

Odpowiedzi:

110

Aby spakować plik JS do aplikacji, gdy serwer działa ( react-native start), pobierz pakiet do katalogu zasobów swojej aplikacji:

curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"

W następnej wersji (0.12) naprawimy react-native bundlepolecenie do pracy z projektami na Androida zgodnie z oczekiwaniami.

kzzzf
źródło
Dziękuję Ci! W jaki sposób mam powiedzieć reagować naInstanceManager, aby korzystał z dołączonego zasobu? Czy magia dzieje się automatycznie?
Matthew
9
Nie można utworzyć pliku Ostrzeżenie: Android / app / src / main / resources / index.android.bundle: Brak takiego pliku lub Ostrzeżenie: katalog
almeynman
2
Ostrzeżenie: Nie udało się utworzyć pliku Ostrzeżenie: Android / app / src / main / resources / index.android.bundle: Brak takiego pliku lub Ostrzeżenie: zawinięcie katalogu: (23) Błąd zapisu treści (0! = 16167)
Shivang
3
@Shivang: Utwórz zasoby katalogu w Android / app / src / main. Miałem ten błąd, ponieważ jeszcze nie istniał.
piscator
1
Jest to najlepszy i prosty sposób, gdy lokalnie dystrybuujemy aplikację do celów testowych. (przez materiał) dzięki
Dinesh Anuruddha,
90

Poniższe sprawiło, że działało to dla mnie na Ubuntu 14.04:

cd (App Dir)
react-native start > /dev/null 2>&1 &
adb reverse tcp:8081 tcp:8081

Aktualizacja : patrz

Aktualizacja 2 : @scgough Wystąpił ten błąd, ponieważ program React Native (RN) nie mógł pobrać kodu JavaScript z serwera programistów działającego na naszych stacjach roboczych. Możesz zobaczyć, dlaczego tak się dzieje:

https://github.com/facebook/react-native/blob/42eb5464fd8a65ed84b799de5d4dc225349449be/ReactAndroid/src/main/java/com/facebook/react/devsupport/DevServerHelper.java#L116-L137

Jeśli aplikacja RN wykryje, że korzystasz z Genymotion lub emulatora, próbuje pobrać JavaScript z GENYMOTION_LOCALHOST (10.0.3.2) lub EMULATOR_LOCALHOST (10.0.2.2). W przeciwnym razie zakłada, że ​​używasz urządzenia i próbuje pobrać JavaScript z DEVICE_LOCALHOST (localhost). Problem polega na tym, że serwer deweloperów działa na lokalnym hoście stacji roboczej, a nie na urządzeniu, więc aby go uruchomić, musisz:

dsissitka
źródło
5
uruchamianie adb reverse tcp: 8081 tcp: 8081 na
OSX
To działa! wielkie dzięki. Czy wiesz, czy istnieje sposób wskazania jscodelocation na zasób apk, podobnie jak main.jsbundle w iOS?
Matthew
@dsissitka czy mogę po prostu zapytać, aby zostało to zapisane tutaj w wątku - co to dokładnie robi?
szorstki
@Matthew Boję się, że nie. Przepraszam!
dsissitka
Co jeśli uruchomimy system Android 4.2 i otrzymujemy ten błąd: stackoverflow.com/questions/31525431/...
Augustin Riedinger
39

Ok, chyba pomyślałem, o co tu chodzi. Miało to związek z uruchomioną wersją watchman.

W nowej powłoce uruchom brew update następnie: brew unlink watchman następnie:brew install watchman

teraz możesz uruchomić react-native startz folderu projektu

Zostawiam tę powłokę otwartą, tworzę nowe okno powłoki i uruchamiam: react-native run-androidz mojego folderu projektu. Wszystko jest w porządku ze światem.

ps. Byłem pierwotnie w wersji 3.2 stróża. To uaktualniło mnie do 3.7.

pps. Jestem nowy, więc może nie jest to najszybsza droga do rozwiązania, ale zadziałało dla mnie.

* WIĘCEJ INFORMACJI DOTYCZĄCYCH URUCHAMIANIA / DEBUGOWANIA NA URZĄDZENIU *

Może się okazać, że jeśli wdrożysz aplikację na urządzeniu z Androidem, a nie w emulatorze, pojawi się czerwony ekran śmierci z komunikatem o błędzie Unable to load JS Bundle. Musisz ustawić serwer debugowania, aby urządzenie działało tak, jakby komputer reagował ... albo na jego nazwę, albo na adres IP.

  1. Naciśnij Menuprzycisk urządzenia
  2. Wybierz Dev Settings
  3. Wybierz Debug server host for devicelubChange Bundle Location
  4. Wpisz adres IP urządzenia i załaduj ponownie JS oraz port reagowania, np 192.168.1.10:8081

Więcej informacji: http://facebook.github.io/react-native/docs/running-on-device-android.html

szorstki
źródło
@ jacobross85 Cieszę się, że pomogło! Daj mi głos, jeśli masz na to ochotę ;-)
scgough
1
Musiałem uruchomić, brew uninstall watchmanzanim zainstaluje dla mnie najnowszą wersję.
Amozoss
Dodałem trochę więcej informacji dla osób debugujących na urządzeniu z Androidem niż emulatorze.
szorstki
Już uruchomiłem najnowszą wersję Watchmana, ale to mnie naprawiło. Weeeeird
pfac
1
Dzięki za tego brata, to jest naprawdę pomocne. Dlatego dam ci głos.
Priyank Jotangiya,
17

Z katalogu projektu uruchom

react-native start

Wytwarza następujące:

$ react-native start
 ┌────────────────────────────────────────────────────────────────────────────┐ 
   Running packager on port 8081.                                             
                                                                              
   Keep this packager running while developing on any JS projects. Feel       
   free to close this tab and run your own packager instance if you           
   prefer.                                                                    
                                                                              
   https://github.com/facebook/react-native                                  │ 
                                                                              
 └────────────────────────────────────────────────────────────────────────────┘ 
Looking for JS files in
   /home/user/AwesomeProject 


React packager ready.

[11:30:10 PM] <START> Building Dependency Graph
[11:30:10 PM] <START> Crawling File System
[11:30:16 PM] <END>   Crawling File System (5869ms)
[11:30:16 PM] <START> Building in-memory fs for JavaScript
[11:30:17 PM] <END>   Building in-memory fs for JavaScript (852ms)
[11:30:17 PM] <START> Building in-memory fs for Assets
[11:30:17 PM] <END>   Building in-memory fs for Assets (838ms)
[11:30:17 PM] <START> Building Haste Map
[11:30:18 PM] <START> Building (deprecated) Asset Map
[11:30:18 PM] <END>   Building (deprecated) Asset Map (220ms)
[11:30:18 PM] <END>   Building Haste Map (759ms)
[11:30:18 PM] <END>   Building Dependency Graph (8319ms)
Pēteris Caune
źródło
1
Mam również problem zgłoszony przez PO. Uruchamiam projekt za pomocą react-native run-androidz folderu projektu. Buduje się OK w terminalu, ale jak tylko aplikacja otworzy się na moim urządzeniu, Unable to download JS bundle
pojawia
6
musisz uruchomić adb reverse tcp: 8081 tcp: 8081
Matthew
1
Uruchomiłem adb reverse tcp: 8081 tcp: 8081 i
pojawia
1
Mam ten sam problem, błąd: zamknięty. Proszę o pomoc?
Eusthace
Upewnij się, że Twój adres IP jest prawidłowy w „Ustawieniach programisty”, jeśli korzystasz z Androida. Jeśli pracujesz z dynamicznym adresem IP, może się to zmienić z dnia na dzień.
Sam Purcell,
13

Proste rozwiązanie, które działa dla mnie z Ubuntu 14.04.

react-native run-android

Emulator (już uruchomiony) zwróci: Nie można pobrać pakietu JS; uruchom ponownie serwer JS:

react-native start

Naciśnij Przeładuj JS na emulatorze. To zadziałało dla mnie. Mam nadzieję, że to pomoże

Raphael_b
źródło
Właściwie działa. Ze wszystkich odpowiedzi jest to najprostsze rozwiązanie. Nie mogę uwierzyć, że nie ma tego w oficjalnym dokumencie.
bluecollarcoder
OP dotyczy uruchamiania na urządzeniu, a nie na emulatorze. Te kroki nie działają na urządzeniu bez dodatkowej konfiguracji. Zobacz zaakceptowaną odpowiedź.
davidgoli
8

W aplikacji na Androida otworzyłem Menu (Command + M w Genymotion) -> Ustawienia deweloperów -> Host i port serwera debugowania dla urządzenia

ustaw wartość na: localhost: 8081

To zadziałało dla mnie.

Daniel Masarin
źródło
Dzięki! Pracował dla mnie
Howard
7

Po wypróbowaniu kombinacji odpowiedzi tutaj, to działa dla mnie.

Używam Genymotion jako mojego emulatora.

1 Uruchom emulator Genymotion.

2 Z terminala

cd AwesomeProject
react-native run-android # it loads in genymotion and fails with bundle error
react-native start > /dev/null 2>&1 & # from dsissitka
adb reverse tcp:8081 tcp:8081 # from dsissitka

3 Załaduj ponownie z emulatora.

Ładuje się!

Mogę teraz zacząć się rozwijać.

ooolala
źródło
uzyskiwanie Otrzymanie błędu „dwukrotnie: zamknięty” przy „adb reverse”
almeynman,
FYI: Teraz robię powyższe z odpowiedzią „Daniel Masarin” dotyczącą ustawienia hosta serwera debugowania na mój adres WiFi z portem 8081, działa on z RN v 0.17.0
ooolala
dziękuję bardzo to działa dla mnie :) na powyższym API 21+ działa tylko to
Ashwini Bhat
4

Usuń aplikację z telefonu! Próbowałem kilku kroków, ale w końcu to się udało.

  1. Jeśli próbujesz wcześniej uruchomić aplikację, ale się nie udało, usuń ją z urządzenia z Androidem.
  2. Biegać $ react-native run-android
  3. Otwórz menu React Rage Shake z poziomu aplikacji na urządzeniu z Androidem, przejdź do, Dev Settingsa następnie do Debug server host & port for device. Podaj adres IP swojego serwera (adres IP komputera) i hosta 8081, np 192.168.50.35:8081. Na komputerze Mac możesz znaleźć adres IP swojego komputera pod adresemSystem Preferences -> Network -> Advanced... -> TCP/IP -> IPv4 Address .
  4. Otwórz ponownie menu Rage Shake i kliknij Reload JS.
Andru
źródło
2

Nie mam wystarczającej reputacji, aby komentować, ale odnosi się to do odpowiedzi dsissitki. Działa również w systemie Windows 10.

Aby powtórzyć, polecenia to:

cd (App Dir)
react-native start > /dev/null 2>&1 &
adb reverse tcp:8081 tcp:8081
Sean Saito
źródło
2

Oto proste kroki, aby uruchomić aplikację na Androidzie (wydanie):

1. Przejdź do katalogu głównego aplikacji.

2. Uruchom to polecenie.

pakiet React-Native - platforma Android - Dev false --entry-file index.android.js - pakiet-wyjście android / app / src / main / resources / index.android.bundle --assets-dest android / app / src / main / res

Wszystkie twoje pliki zostaną skopiowane.

3. Utwórz podpisany APK.

Otwórz studio Android.

Kompilacja> Wygeneruj podpisany plik APK> [Wpisz wymagane dane, naciśnięcie klawisza musi zostać wygenerowane przed tym krokiem]

Twój pakiet APK powinien zostać wygenerowany bez żadnych błędów. Zainstaluj na swoim urządzeniu, a to powinno działać bez żadnych problemów.

Możesz także podłączyć swoje urządzenie i bezpośrednio nacisnąć ikonę Uruchom na Android Studio w celu przetestowania.


Generowanie naciśnięcia klawisza:

  1. Idź do C: \ Program Files \ Java \ jdkx.x.x_x \ bin

  2. Biegać

keytool -genkey -v -keystore d: \ my_private_key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

Prawdopodobnie poprosi Cię o podanie niektórych szczegółów. Zrób to, a otrzymasz plik naciśnięcia klawisza ( my_private_key.keystore ), którego można użyć do podpisania pliku APK.

Edison D'souza
źródło
po react-native bundleotrzymaniu błędu: Zduplikowane zasoby
Amir Shabani,
1

Dostałem to na Linuksie po zatrzymaniu react-native run-androidprocesu. Wygląda na to, że serwer węzłów nadal działa, więc przy następnym uruchomieniu nie będzie działał poprawnie i aplikacja nie będzie mogła się połączyć.

Rozwiązaniem tutaj jest zabicie procesu węzła działającego w Xterm, który możesz zabić, wchodząc w ctrl-cto okno (łatwiej) lub możesz go lsof -n -i4TCP:8081wtedy znaleźć kill -9 PID.

Następnie uruchom react-native run-androidponownie.

Travis Reeder
źródło
1

Sprawdź połączenie Wi-Fi.

Inną możliwością może być brak połączenia z Wi-Fi, połączenie z niewłaściwą siecią lub nieprawidłowy adres IP w ustawieniach programisty. Z jakiegoś powodu mój Android odłączył się od Wi-Fi i nieświadomie zacząłem otrzymywać ten błąd.

Kelsey
źródło
Dzięki, to było to. Domyślnie serwer debugowania jest osiągany w sieci lokalnej. Dlatego jeśli nie masz dostępu do Wi-Fi, nie możesz się z nim połączyć.
Paul
1

Działa na urządzeniu

Znalazłem inną odpowiedź.

  • adb reverse: działa tylko na Androidzie 5.0+ (API 21).
  • Kolejną: Otwórz menu Developer przez potrząsanie urządzeniem, należy przejść do Ustawienia Dev , przejdź do hosta serwera Debug dla urządzenia , wpisz swój adres IP urządzenia i portu lokalnego serwera dev
Mike Nguyen
źródło
1

Aktualizacja

Teraz w systemie Windows nie ma potrzeby uruchamiania startu z reakcją natywną. Program pakujący uruchomi się automatycznie.

Jagadish Upadhyay
źródło
1

Jedną ważną rzeczą, aby sprawdzić, że nikt dotąd nie wspomniał: Sprawdź lokalną zaporę ogniową, upewnij się, że jest WYŁĄCZONA .

Zobacz moją odpowiedź tutaj: https://stackoverflow.com/a/41400708/1459275

niltoid
źródło
0

Używam tylko Ubuntu i Androida i nie mogłem go uruchomić. Znalazłem bardzo proste rozwiązanie, które polega na zaktualizowaniu pliku package.json, zmieniając następujące wiersze:

"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },

do

"scripts": {
    "start": "adb reverse tcp:8081 tcp:8081 && node node_modules/react-native/local-cli/cli.js start"
  },

Następnie uruchom serwer, pisząc

npm run start

Dzięki temu urządzenie z Androidem szuka serwera węzłów na komputerze zamiast lokalnie w telefonie.

IonicBurger
źródło
0

Początkowe pytanie było o przeładowywania aplikacji w phyisical urządzenia.

Podczas debugowania aplikacji na urządzeniu fizycznym (np. Przez adb) możesz ponownie załadować pakiet JS, klikając lewy górny przycisk „akcji” na urządzeniu. Spowoduje to otwarcie menu opcji (ponowne ładowanie, debugowanie JS zdalnie ...).

Mam nadzieję że to pomoże.

GuGuss
źródło
0

Ten błąd można łatwo rozwiązać, wykonując następujące czynności:

    //run the command at /android sdk / platforms-tool folder
        adb reverse tcp:8081 tcp:8081

    //now come to root folder of your app
    1. npm start
    2. create 'assets' folder inside rootApp/android/app/src/main/
    3. curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"
    4. make sure anyone physical or virtual device attached is running.
    5. react-native run-android
Atif Hussain
źródło
1
czy mogę uruchomić adb reverse tcp:8081 tcp:8081w folderze głównym mojej aplikacji?
Marson Mao
znajdź folder adb w swoim systemie operacyjnym. w Android SDK / narzędzia platformy /
Atif Hussain
1
ale widzę wiele miejsc wskazujących, że to polecenie można uruchomić w folderze głównym aplikacji, również odpowiedź dsissitka sugeruje, aby uruchomić go w folderze głównym aplikacji, więc jestem naprawdę zdezorientowany.
Marson Mao,
być może to polecenie jest obsługiwane również przez reakcję-rodzimą. nie jestem pewien co do tego. ale adb jest obsługiwany przez narzędzia Android SDK. więcej szczegółów można znaleźć tutaj facebook.github.io/react-native/docs/…
Atif Hussain
1
@MarsonMao W zależności od konfiguracji systemu możesz uruchomić adb z katalogu aplikacji. Przeczytaj o zmiennej PATH i pakietach globalnych vs lokalnych, aby uzyskać więcej informacji.
mchandleraz
0

Aby rozwiązać ten problem, postępuj zgodnie z instrukcjami wymienionymi na oficjalnej stronie . Ten problem występuje na prawdziwym urządzeniu, ponieważ pakiet JS znajduje się w systemie programistycznym, a aplikacja na Twoim prawdziwym urządzeniu nie wie o jego lokalizacji.

mthakuri
źródło
0

W nowym React Native (na pewno 0.59) konfiguracja debugowania jest w środku android/app/src/debug/res/xml/react_native_config.xml

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <domain-config cleartextTrafficPermitted="true">
    <domain includeSubdomains="false">localhost</domain>
    <domain includeSubdomains="false">10.0.2.2</domain>
    <domain includeSubdomains="false">10.0.3.2</domain>
  </domain-config>
</network-security-config>
Bobu
źródło
0

Uruchom dwa terminale na tym samym i 1-szym terminalu uruchom-uruchom natywny start i drugim terminalu uruchom natywny uruchom-android ten problem rozwiązano po prostu. Powodzenia

Chaurasia
źródło
0

Hej, miałem do czynienia z tym problemem z moim rodzimym projektem reagowania nagim, symulator IOS działa dobrze, ale Android ciągle wyświetlał ten błąd. oto możliwe rozwiązanie, które zadziałało dla mnie.

krok 1, sprawdź, czy urządzenie adb jest autoryzowane, uruchamiając w swoim terminalu: urządzenia adb

jeśli jest to nieautoryzowane, uruchom następujące polecenia

krok 2, sudo adb kill-server krok 3, sudo adb start-server

następnie sprawdź, czy polecenie urządzeń adb pokazuje listę urządzeń podłączonych do emulatora-5554 urządzenia

zamiast nieautoryzowanego, jeśli jest to urządzenie zamiast nieautoryzowanego

krok 4, uruchom npx reag-native run-android

to zadziałało w moim przypadku Mam nadzieję, że to rozwiąże twój problem.

Ali Shirazee
źródło
0

Uznałem, że to dziwne, ale mam rozwiązanie. Zauważyłem, że co jakiś czas mój folder projektu przechodził w tryb tylko do odczytu i nie mogłem go zapisać przed VS. Przeczytałem więc propozycję przeniesienia NPM z lokalnego użytkownika PATH do globalnej zmiennej systemowej PATH i działało to jak urok.

Adriano Luiz Spanhol
źródło
-1

Uruchamianie npm start z katalogu-rodzimego-reagowania dla mnie zadziałało.

Siergiej Onishchenko
źródło