Android gagal memuat bundel JS


201

Saya mencoba menjalankan AwesomeProject pada Nexus5 saya (android 5.1.1).

Saya dapat membangun proyek dan menginstalnya di perangkat. Tetapi ketika saya menjalankannya, saya mendapat layar merah yang mengatakan

Tidak dapat mengunduh bundel JS. Apakah Anda lupa memulai server pengembangan atau menghubungkan perangkat Anda?

Dalam bereaksi iOS asli, saya dapat memilih untuk memuat jsbundle offline. Bagaimana saya bisa melakukan hal yang sama untuk Android? (Atau setidaknya, di mana saya dapat mengkonfigurasi alamat server?)

Memperbarui

Untuk menjalankan dengan server lokal, jalankan perintah berikut di bawah direktori root proyek asli-reaksi Anda

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

silakan lihat jawaban dsissitka untuk lebih jelasnya.

Untuk menjalankan tanpa server, bundel jsfile ke dalam apk dengan menjalankan:

  1. buat folder aset di bawah android/app/src/main
  2. curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"

silakan lihat jawaban kzzzf untuk lebih jelasnya.


Stll belum menemukan masalah. Tetapi sementara itu, Anda dapat mencobanya di simulator. Ini bekerja dengan sangat baik pada genymotion saya.
Bryan

ketika saya mencoba mengetikkan dua perintah untuk dijalankan dengan server lokal saya mendapatkan kesalahan di PowerShell mengatakan: "Karakter ampersand (&) tidak diperbolehkan". Saya menganggap saya harus berada di root aplikasi-dir saya ketika menjalankan perintah?
user2236165

1
Apakah ini berarti bahwa debugging melalui USB pada Android 4.1 tidak mungkin karena adb reversetidak didukung?
bonh

Saya ingin menyebutkan bahwa untuk dapat mengeksekusi adb reverse tcp:8081 tcp:8081Anda memerlukan versi ADB 1.0.32, reverseopsi tidak ada di 1.0.31
jvalen

Jawaban:


110

Untuk bundel file JS ke dalam apk Anda saat server Anda menjalankan ( react-native start) unduh bundel ke direktori aset aplikasi Anda:

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

Dengan rilis berikutnya (0.12) kami akan memperbaiki react-native bundleperintah untuk bekerja dengan proyek-proyek android seperti yang diharapkan.


Terima kasih! Bagaimana cara saya memberi tahu reactInstanceManager untuk menggunakan aset yang dibundel? Atau keajaiban terjadi begitu saja?
Matius

9
Gagal membuat file Peringatan: android / app / src / main / aset / index.android.bundle: Tidak ada file atau Peringatan: direktori
almeynman

2
Peringatan: Gagal membuat file Peringatan: android / app / src / main / aset / index.android.bundle: Tidak ada file atau Peringatan: direktori curl: (23) Badan penulisan gagal (0! = 16167)
Shivang

3
@Shivang: Buat aset direktori di android / app / src / main. Saya memiliki kesalahan ini karena belum ada.
piscator

1
Ini adalah cara terbaik dan sederhana ketika kami mendistribusikan aplikasi secara lokal untuk tujuan pengujian. (melalui kain) terima kasih
Dinesh Anuruddha

90

Berikut ini membuatnya bekerja untuk saya di Ubuntu 14.04:

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

Pembaruan : Lihat

Pembaruan 2 : @scgough Kami mendapat kesalahan ini karena React Native (RN) tidak dapat mengambil JavaScript dari server dev yang berjalan di workstation kami. Anda dapat melihat mengapa ini terjadi di sini:

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

Jika aplikasi RN Anda mendeteksi bahwa Anda menggunakan Genymotion atau emulator, ia mencoba mengambil JavaScript dari GENYMOTION_LOCALHOST (10.0.3.2) atau EMULATOR_LOCALHOST (10.0.2.2). Kalau tidak, ia menganggap bahwa Anda menggunakan perangkat dan mencoba untuk mengambil JavaScript dari DEVICE_LOCALHOST (localhost). Masalahnya adalah bahwa server dev berjalan di localhost workstation Anda, bukan di perangkat, jadi untuk membuatnya berfungsi, Anda harus:


5
menjalankan adb reverse tcp: 8081 tcp: 8081 di osx juga bekerja
shyamal

Berhasil! Terima kasih banyak. Apakah Anda tahu jika ada cara untuk mengarahkan jscodelocation ke sumber daya apk, seperti main.jsbundle iOS?
Matius

@dsissitka dapatkah saya bertanya sehingga direkam di utas ini - apa fungsinya?
scgough

@ Matius Takut tidak. Maaf!
dsissitka

Bagaimana jika kita menjalankan Android 4.2 dan mendapatkan kesalahan ini: stackoverflow.com/questions/31525431/…
Augustin Riedinger

39

Ok, saya pikir saya sudah tahu apa masalahnya di sini. Itu ada hubungannya dengan versi yang watchmansaya jalankan.

Di shell baru, jalankan brew update kemudian: brew unlink watchman lalu:brew install watchman

sekarang, Anda dapat menjalankan react-native startdari folder proyek Anda

Saya membiarkan shell ini terbuka, membuat jendela shell baru dan menjalankan: react-native run-androiddari folder proyek saya. Semua benar dengan dunia.

ps. Saya awalnya di versi 3.2 penjaga. Ini meningkatkan saya menjadi 3,7.

pps. Saya baru dalam hal ini sehingga mungkin bukan rute tercepat untuk solusi tetapi itu berhasil bagi saya.

* INFO LEBIH LANJUT UNTUK MENJALANKAN / BERDIRI PADA PERANGKAT *

Anda mungkin menemukan bahwa jika Anda menggunakan aplikasi Anda ke perangkat Android Anda daripada emulator Anda mendapatkan layar merah kematian dengan kesalahan mengatakan Unable to load JS Bundle. Anda perlu mengatur server debug agar perangkat Anda menjalankan reaksi komputer ... baik namanya ATAU alamat IP.

  1. Tekan Menutombol perangkat
  2. Pilih Dev Settings
  3. Pilih Debug server host for deviceatauChange Bundle Location
  4. Ketik IP mesin Anda dan Muat Ulang JS ditambah port reaksi misalnya 192.168.1.10:8081

Info lebih lanjut: http://facebook.github.io/react-native/docs/running-on-device-android.html


@ jacobross85 Senang itu membantu! Beri saya suara positif jika Anda menginginkannya ;-)
scgough

1
Harus dijalankan brew uninstall watchmansebelum menginstal versi terbaru untuk saya.
Amozoss

Saya telah menambahkan sedikit lebih banyak info untuk debugging ke perangkat Android daripada emulator.
scgough

Sudah menjalankan versi terbaru penjaga tetapi ini memperbaikinya untuk saya. Weeeeird
pfac

1
Terima kasih untuk saudara ini, ini sangat membantu. Itu sebabnya saya akan memberi Anda upvote.
Priyank Jotangiya

17

Dari direktori proyek Anda, jalankan

react-native start

Ini output sebagai berikut:

$ 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)

1
Saya juga mengalami masalah yang dilaporkan OP. Saya menjalankan proyek menggunakan react-native run-androiddari folder proyek. Itu membangun OK di terminal tetapi segera setelah aplikasi terbuka pada perangkat saya, saya mendapatkan layar merah mengatakanUnable to download JS bundle
scgough

6
Anda perlu menjalankan adb reverse tcp: 8081 tcp: 8081
Matthew

1
Saya menjalankan adb reverse tcp: 8081 tcp: 8081 dan saya mendapatkan error: closed error: closed
JacobRossDev

1
Saya memiliki masalah yang sama, kesalahan: ditutup. Tolong ada bantuan?
Eusthace

Pastikan alamat ip Anda benar di "Pengaturan dev" jika Anda menggunakan Android. Jika Anda bekerja dengan IP dinamis, ini dapat berubah dalam semalam.
Sam Purcell

13

Solusi mudah yang bekerja untuk saya dengan Ubuntu 14.04.

react-native run-android

Emulator (sudah diluncurkan) akan kembali: Tidak dapat mengunduh JS Bundle; mulai lagi server JS:

react-native start

Tekan Muat Ulang JS pada emulator. Ini berhasil untuk saya. Semoga ini bisa membantu


Sebenarnya berhasil. Dari semua jawaban, ini adalah solusi paling sederhana. Tidak percaya ini tidak ada dalam dokumen resmi.
bluecollarcoder

OP adalah tentang menjalankan perangkat, bukan emulator. Langkah-langkah ini tidak berfungsi pada perangkat tanpa pengaturan tambahan. Lihat jawaban yang diterima.
davidgoli

8

Dalam aplikasi di android saya membuka Menu (Command + M dalam Genymotion) -> Pengaturan Dev -> Host server & port Debug untuk perangkat

setel nilai ke: localhost: 8081

Ini berhasil untuk saya.


Terima kasih! Bekerja untuk saya
Howard

7

Setelah mencoba kombinasi jawaban di sini, inilah yang bekerja untuk saya.

Saya menggunakan Genymotion sebagai emulator saya.

1 Mulai emulator Genymotion.

2 Dari terminal

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 Muat ulang dari emulator.

Itu banyak!

Sekarang saya bisa mulai berkembang.


mendapatkan Mendapatkan "kesalahan: ditutup" dua kali pada "adb reverse"
almeynman

FYI: Saya sekarang melakukan hal di atas dengan jawaban "Daniel Masarin" dari pengaturan host server debug ke alamat WiFi saya dengan port 8081, ia bekerja dengan RN v 0.17.0
ooolala

terima kasih banyak ini bekerja untuk saya :) di atas API 21+ hanya berfungsi ini
Ashwini Bhat

4

Hapus Aplikasi dari ponsel Anda! Saya mencoba beberapa langkah, tetapi akhirnya berhasil.

  1. Jika Anda mencoba menjalankan aplikasi Anda sebelumnya tetapi gagal, hapus aplikasi itu dari perangkat android Anda.
  2. Lari $ react-native run-android
  3. Buka React Rage Shake Menu dari dalam aplikasi Anda di perangkat android Anda, pergi ke Dev Settingsdan kemudian ke Debug server host & port for device. Masukkan IP server Anda (IP komputer Anda) dan host 8081, misalnya 192.168.50.35:8081. Di mac Anda dapat menemukan IP komputer Anda di System Preferences -> Network -> Advanced... -> TCP/IP -> IPv4 Address.
  4. Buka Rage Shake Menu lagi dan klik Reload JS.


2

Saya tidak memiliki reputasi yang cukup untuk berkomentar, tetapi ini merujuk pada jawaban dsissitka. Ini bekerja pada Windows 10 juga.

Untuk mengulangi, perintahnya adalah:

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

2

Berikut adalah langkah-langkah sederhana untuk menjalankan aplikasi Anda di Android (rilis):

1. Buka root aplikasi Anda.

2. Jalankan perintah ini.

bundel react-native --platform android --dev false --entry-file index.android.js --bundle-output android / app / src / main / aset / index.android.bundle --assets-dest android / app / src / main / res

Semua file Anda disalin.

3. Buat APK yang ditandatangani.

Buka studio android.

Build> Generate Signed APK> [Isi rincian yang diperlukan, keystroke harus dibuat sebelum langkah ini]

APK Anda harus dibuat tanpa kesalahan. Pasang di perangkat Anda dan ini akan berfungsi tanpa masalah.

Anda juga dapat menghubungkan perangkat Anda dan langsung tekan ikon Jalankan di studio android untuk pengujian.


Menghasilkan Keystroke:

  1. Goto C: \ Program Files \ Java \ jdkx.x.x_x \ bin

  2. Lari

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

Mungkin akan meminta Anda untuk mengisi beberapa detail. Lakukan dan Anda memiliki file keystroke Anda ( my_private_key.keystore ) yang dapat digunakan untuk menandatangani apk Anda.


setelah react-native bundlesaya mendapat Kesalahan: Sumber daya
rangkap

1

Saya mendapatkan ini di Linux setelah menghentikan react-native run-android proses. Tampaknya server simpul masih berjalan sehingga saat Anda menjalankannya lagi, itu tidak akan berjalan dengan baik dan aplikasi Anda tidak dapat terhubung.

Cara mengatasinya di sini adalah untuk membunuh proses simpul yang berjalan dalam Xterm yang dapat Anda bunuh dengan ctrl-cjendela itu (lebih mudah) atau Anda dapat menemukannya menggunakan lsof -n -i4TCP:8081itukill -9 PID .

Kemudian jalankan react-native run-androidlagi.


1

Periksa koneksi wifi Anda.

Kemungkinan lain bisa jadi Anda tidak terhubung ke wifi, terhubung ke jaringan yang salah, atau alamat ip salah dalam pengaturan dev Anda. Untuk beberapa alasan, android saya terputus dari wifi dan saya mulai mendapatkan kesalahan ini, tanpa sadar.


Terima kasih, itu dia. Secara default server Debug tercapai di jaringan lokal. Karena itu, jika Anda tidak memiliki akses wifi, Anda tidak dapat mencapainya.
Paul

1

Berjalan di perangkat

Saya telah menemukan jawaban lain.

  • adb reverse: hanya berfungsi di Android 5.0+ (API 21).
  • Lain: Buka menu Pengembang dengan mengocok perangkat, pergi ke Pengaturan Dev , Pergi ke host server Debug untuk perangkat , ketik alamat IP mesin Anda dan port dari server dev lokal

1

Sebuah pembaharuan

Sekarang di windows tidak perlu menjalankan mulai asli-mulai. Paket akan berjalan secara otomatis.



0

Saya hanya menggunakan Ubuntu dan Android, dan saya tidak dapat menjalankannya. Saya menemukan solusi yang sangat sederhana yaitu memperbarui file package.json Anda, mengubah baris ini:

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

untuk

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

Dan kemudian Anda menjalankan server dengan mengetik

npm run start

Ini memastikan perangkat android mencari server simpul pada komputer Anda alih-alih secara lokal di telepon.


0

Pertanyaan awal adalah tentang memuat ulang aplikasi dalam perangkat fisik.

Ketika Anda debug aplikasi di perangkat fisik (yaitu via adb), Anda dapat memuat ulang bundel JS dengan mengklik tombol "aksi" kiri perangkat Anda. Ini akan membuka menu opsi (Reload, Debug JS jarak jauh ...).

Semoga ini membantu.


0

Kesalahan ini dapat dengan mudah diselesaikan dengan langkah-langkah berikut:

    //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

1
dapatkah saya menjalankannya adb reverse tcp:8081 tcp:8081di folder root aplikasi saya?
Marson Mao

temukan folder adb di OS Anda. itu di Android SDK / platform tools /
Atif Hussain

1
tetapi saya melihat banyak tempat merujuk bahwa perintah ini dapat dijalankan di folder aplikasi root, juga jawaban oleh dsissitka menyarankan agar menjalankannya di folder aplikasi root, jadi saya benar-benar bingung.
Marson Mao

Mungkin perintah ini ditangani oleh react-asli juga. saya tidak yakin tentang ini. tetapi adb didukung oleh alat SDK Android. Anda dapat menemukan detail lebih lanjut di sini facebook.github.io/react-native/docs/…
Atif Hussain

1
@MarsonMao Tergantung pada pengaturan sistem Anda, Anda mungkin dapat menjalankan adb dari direktori aplikasi Anda. Baca di variabel PATH, dan paket global vs lokal untuk info lebih lanjut.
mchandleraz

0

Anda dapat mengikuti instruksi yang disebutkan di halaman resmi untuk memperbaiki masalah ini. Masalah ini terjadi pada perangkat nyata karena bundel JS terletak di sistem pengembangan Anda dan aplikasi di dalam perangkat nyata Anda tidak mengetahui lokasinya.


0

Di React Native baru (pasti 0,59) konfigurasi debug ada di dalam 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>

0

Mulai dua terminal pada start yang sama dan terminal run pertama mulai asli dan terminal kedua reaksi asli asli-android masalah ini diselesaikan dengan cara sederhana. Dan semoga beruntung


0

Hei saya menghadapi masalah ini dengan proyek telanjang asli saya, simulator IOS berfungsi dengan baik tetapi android terus memberi saya kesalahan ini. berikut ini adalah solusi yang mungkin berhasil bagi saya.

langkah 1, periksa apakah perangkat adb diotorisasi dengan menjalankan di terminal Anda: perangkat adb

jika tidak sah jalankan perintah berikut

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

kemudian periksa apakah perintah perangkat adb menunjukkan daftar perangkat yang terpasang perangkat emulator-5554

alih-alih tidak sah jika itu perangkat alih-alih tidak sah

langkah 4, jalankan npx react-native run-android

ini telah berfungsi dalam contoh saya, saya harap ini menyelesaikan masalah Anda.


0

Saya menemukan ini aneh tapi saya punya solusi. Saya perhatikan bahwa sesekali folder proyek saya menjadi read-only dan saya tidak bisa menyimpannya dari VS. Jadi saya membaca saran untuk mentransfer NPM dari PATH pengguna lokal ke variabel global PATH seluruh sistem, dan itu bekerja seperti pesona.


Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.