Android ไม่สามารถโหลดชุดบันเดิล JS

ฉันพยายามเรียกใช้ AwesomeProject บน Nexus5 ของฉัน (android 5.1.1)

ฉันสามารถสร้างโครงการและติดตั้งบนอุปกรณ์ แต่เมื่อฉันเรียกใช้ฉันได้รับหน้าจอสีแดงว่า

ไม่สามารถดาวน์โหลดบันเดิล JS คุณลืมเริ่มต้นเซิร์ฟเวอร์การพัฒนาหรือเชื่อมต่ออุปกรณ์ของคุณ?

ใน iOS ดั้งเดิมที่ตอบสนองฉันสามารถเลือกโหลด jsbundle ออฟไลน์ได้ ฉันจะทำสิ่งเดียวกันสำหรับ Android ได้อย่างไร (หรืออย่างน้อยฉันจะกำหนดค่าที่อยู่เซิร์ฟเวอร์ได้ที่ไหน)

ปรับปรุง

หากต้องการรันด้วยโลคัลเซิร์ฟเวอร์ให้รันคำสั่งต่อไปนี้ภายใต้ไดเรกทอรีรูทโปรเจคของคุณ

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

โปรดดูคำตอบของ dsissitka สำหรับรายละเอียดเพิ่มเติม

หากต้องการรันโดยไม่มีเซิร์ฟเวอร์ให้รวม jsfile ลงใน apk โดยเรียกใช้:

1. สร้างโฟลเดอร์สินทรัพย์ภายใต้ android/app/src/main
2. curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"

โปรดดูคำตอบของ kzzzf สำหรับรายละเอียดเพิ่มเติม

ในการรวมไฟล์ JS ไว้ใน apk ของคุณในขณะที่เซิร์ฟเวอร์ของคุณทำงานอยู่ ( react-native start) ดาวน์โหลดบันเดิลในไดเรกทอรีสินทรัพย์ของแอป

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

ด้วยรุ่นถัดไป (0.12) เราจะแก้ไขreact-native bundleคำสั่งให้ทำงานกับโครงการ Android ตามที่คาดไว้

ต่อไปนี้ทำให้มันทำงานกับฉันใน Ubuntu 14.04:

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

อัปเดต : ดู

• ทำงานบนอุปกรณ์ (Android)
• อุปกรณ์เตือนถูกระงับไหม?

อัปเดต 2 : @scgough เราได้รับข้อผิดพลาดนี้เนื่องจาก React Native (RN) ไม่สามารถเรียก JavaScript จากเซิร์ฟเวอร์ dev ที่ทำงานบนเวิร์กสเตชันของเรา คุณสามารถดูว่าทำไมสิ่งนี้เกิดขึ้นที่นี่:

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

หากแอป RN ของคุณตรวจพบว่าคุณกำลังใช้ Genymotion หรือโปรแกรมจำลองการทำงานจะพยายามดึง JavaScript จาก GENYMOTION_LOCALHOST (10.0.3.2) หรือ EMULATOR_LOCALHOST (10.0.2.2) มิฉะนั้นจะถือว่าคุณกำลังใช้อุปกรณ์และพยายามดึง JavaScript จาก DEVICE_LOCALHOST (localhost) ปัญหาคือเซิร์ฟเวอร์ dev ทำงานบนโลคอลโฮสต์ของคุณไม่ใช่อุปกรณ์ดังนั้นเพื่อให้สามารถใช้งานได้คุณต้อง:

• ส่งต่อการรับส่งข้อมูลจาก (localhost ของอุปกรณ์): 8081 / tcp ถึง (localhost ของเวิร์กสเตชัน): 8081 / tcp นั่นคือสิ่งที่คำสั่ง adb ทำ
• บอกแอป RN ของคุณว่าจะหาเซิร์ฟเวอร์ dev ได้ที่ไหน

ตกลงฉันคิดว่าฉันพบปัญหาที่นี่ มันเกี่ยวกับเวอร์ชั่นของwatchmanฉันที่กำลังรันอยู่

ในเชลล์ใหม่ให้รันbrew update จากนั้น: brew unlink watchman แล้ว:brew install watchman

ตอนนี้คุณสามารถเรียกใช้react-native startจากโฟลเดอร์โครงการของคุณ

ฉันเปิดเชลล์นี้ทิ้งไว้สร้างหน้าต่างเชลล์ใหม่และเรียกใช้: react-native run-androidจากโฟลเดอร์โครงการ ถูกต้องกับโลก

PS ฉันเป็นรุ่น 3.2 เดิมของยาม สิ่งนี้อัพเกรดฉันเป็น 3.7

PPS ฉันยังใหม่กับสิ่งนี้เพื่อไม่ให้เป็นเส้นทางที่เร็วที่สุดในการแก้ปัญหา แต่มันได้ผลสำหรับฉัน

* ข้อมูลเพิ่มเติมสำหรับการรัน / การดีบักบนอุปกรณ์ *

คุณอาจพบว่าถ้าคุณปรับใช้แอปของคุณไปยังอุปกรณ์ Android ของคุณมากกว่า emulater คุณจะได้รับหน้าจอสีแดงของการเสียชีวิตUnable to load JS Bundleที่มีข้อผิดพลาดว่า คุณต้องตั้งค่าเซิร์ฟเวอร์ดีบั๊กสำหรับอุปกรณ์ของคุณเพื่อให้คอมพิวเตอร์ของคุณทำงานอยู่ตอบสนอง ... ไม่ว่าจะเป็นชื่อหรือที่อยู่ IP

1. กดอุปกรณ์Menuปุ่ม
2. เลือก Dev Settings
3. เลือกDebug server host for deviceหรือChange Bundle Location
4. พิมพ์ IP ของเครื่องของคุณและ Reload JS พร้อมพอร์ตการตอบสนองเช่น 192.168.1.10:8081

ข้อมูลเพิ่มเติม: http://facebook.github.io/react-native/docs/running-on-device-android.html

จากไดเรกทอรีโครงการของคุณเรียกใช้

react-native start

มันส่งออกดังต่อไปนี้:

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

ทางออกที่ง่ายสำหรับฉันกับ Ubuntu 14.04

react-native run-android

ตัวจำลอง (เปิดตัวแล้ว) จะกลับมา: ไม่สามารถดาวน์โหลด JS Bundle; เริ่มต้นอีกครั้งเซิร์ฟเวอร์ JS:

react-native start

กด Reload JS บนตัวจำลอง มันใช้งานได้สำหรับฉัน หวังว่ามันจะช่วย

ในแอพบน Android ฉันเปิดเมนู (Command + M ใน Genymotion) -> การตั้งค่า Dev -> โฮสต์เซิร์ฟเวอร์ Debug & พอร์ตสำหรับอุปกรณ์

ตั้งค่าเป็น: localhost: 8081

มันใช้งานได้สำหรับฉัน

หลังจากลองค้นหาคำตอบที่นี่แล้วนี่คือสิ่งที่ใช้ได้กับฉัน

ฉันใช้ Genymotion เป็นตัวเลียนแบบ

1 เริ่มต้นโปรแกรมจำลอง Genymotion

2 จากอาคารผู้โดยสาร

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 โหลดซ้ำจากโปรแกรมจำลอง

มันโหลด!

ฉันสามารถเริ่มพัฒนาได้แล้ว

ลบแอพออกจากโทรศัพท์ของคุณ! ฉันลองหลายขั้นตอน แต่มันก็ทำในที่สุด

1. หากคุณพยายามเรียกใช้แอพก่อนหน้านี้ แต่ล้มเหลวให้ลบออกจากอุปกรณ์ Android
2. วิ่ง $ react-native run-android
3. เปิด React Rage เมนู Shake จากภายในแอปของคุณบนอุปกรณ์ Android ของคุณไปแล้วDev Settings Debug server host & port for deviceมีใส่เซิร์ฟเวอร์ของคุณ IP (IP ของคอมพิวเตอร์ของคุณ) และโฮสต์เช่น8081 192.168.50.35:8081บน Mac คุณสามารถหา IP System Preferences -> Network -> Advanced... -> TCP/IP -> IPv4 Addressของคอมพิวเตอร์ของคุณที่
4. Reload JSเปิดโกรธเขย่าเมนูอีกครั้งและคลิก

เห็นได้ชัดว่า adb reverse ถูกนำมาใช้ใน Android 5.0
การรับ "ข้อผิดพลาด: ปิด" สองครั้งใน "adb reverse"

ฉันเดาว่าเราต้องไปข้างหน้าด้วยคำตอบของ kzzzf

ฉันไม่มีชื่อเสียงพอที่จะแสดงความคิดเห็น แต่นี่หมายถึงคำตอบของ dsissitka มันใช้งานได้บน Windows 10 เช่นกัน

เพื่อย้ำคำสั่งคือ:

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

นี่คือขั้นตอนง่าย ๆ ในการรันแอพของคุณบน Android (รีลีส):

1. ไปที่รูทแอปพลิเคชันของคุณ

2. เรียกใช้คำสั่งนี้

กำรตอบสนองพื้นเมืองกำ - แพลตฟอร์ม Android - เดฟเท็จ - ผู้เข้าร่วมไฟล์ index.android.js - กลุ่มเอาท์พุท android / app / src / หลัก / สินทรัพย์ / index.android.bundle - ชุดหุ่นยนต์ dest-android / src / หลักความละเอียด /

ไฟล์ทั้งหมดของคุณจะถูกคัดลอก

3. สร้าง APK ที่ลงชื่อแล้ว

เปิด android studio

สร้าง> สร้าง APK ที่ลงชื่อแล้ว> [กรอกรายละเอียดที่จำเป็นต้องสร้างการกดแป้นก่อนที่ขั้นตอนนี้]

APK ของคุณควรสร้างโดยไม่มีข้อผิดพลาด ติดตั้งบนอุปกรณ์ของคุณและสิ่งนี้จะทำงานได้โดยไม่มีปัญหาใด ๆ

คุณยังสามารถเชื่อมต่ออุปกรณ์ของคุณและกดไอคอนเรียกใช้บน android studio สำหรับการทดสอบ

สร้างการกดแป้นพิมพ์:

1. ไปที่C: \ Program Files \ Java \ jdkx.x.x_x \ bin

2. วิ่ง

keytool -genkey -v -keystore d: \ my_private_key.keystore -alias my-key-alias -keyalg RSA -keys 2048 - ความละเอียด 10000

มันอาจจะขอให้คุณกรอกรายละเอียดบางอย่าง ทำและมีไฟล์ keystroke ของคุณ ( my_private_key.keystore ) ซึ่งสามารถใช้เพื่อลงชื่อ apk ของคุณ

ฉันได้รับสิ่งนี้บน Linux หลังจากหยุดreact-native run-androidกระบวนการ ดูเหมือนว่าโหนดเซิร์ฟเวอร์ยังคงทำงานอยู่ดังนั้นในครั้งต่อไปที่คุณเรียกใช้เซิร์ฟเวอร์จะทำงานไม่ถูกต้องและแอปของคุณไม่สามารถเชื่อมต่อได้

การแก้ไขที่นี่คือการฆ่ากระบวนการโหนดที่กำลังทำงานอยู่ใน Xterm ที่คุณสามารถฆ่าโดยctrl-cไอเอ็นจีหน้าต่างที่ (ง่าย) หรือคุณสามารถค้นหาได้ใช้แล้วlsof -n -i4TCP:8081kill -9 PID

จากนั้นเรียกใช้react-native run-androidอีกครั้ง

ตรวจสอบการเชื่อมต่อ wifi ของคุณ

ความเป็นไปได้อีกอย่างหนึ่งก็คือคุณไม่ได้เชื่อมต่อกับ WiFi เชื่อมต่อกับเครือข่ายผิดหรือที่อยู่ IP ไม่ถูกต้องในการตั้งค่า dev ของคุณ ด้วยเหตุผลบางอย่างหุ่นยนต์ของฉันถูกตัดการเชื่อมต่อจาก wifi และฉันเริ่มได้รับข้อผิดพลาดนี้โดยไม่รู้ตัว

ทำงานบนอุปกรณ์

ฉันได้พบคำตอบอื่น

• adb reverse: ใช้ได้กับ Android 5.0+ (API 21) เท่านั้น
• อื่น: เปิดเมนูนักพัฒนาโดยการเขย่าอุปกรณ์ไปที่การตั้งค่า Dev , ไปที่Debug โฮสต์เซิร์ฟเวอร์สำหรับอุปกรณ์พิมพ์ที่อยู่IP ของเครื่องและพอร์ตของเซิร์ฟเวอร์ dev ในเครื่องของคุณ

การปรับปรุง

ตอนนี้บน windows ไม่จำเป็นต้องเรียกใช้เริ่มต้นปฏิกิริยาพื้นเมือง หีบห่อจะทำงานโดยอัตโนมัติ

สิ่งสำคัญอย่างหนึ่งในการตรวจสอบว่ายังไม่มีใครพูดถึง: ตรวจสอบไฟร์วอลล์ในเครื่องของคุณตรวจสอบให้แน่ใจว่าปิดอยู่

ดูคำตอบของฉันที่นี่: https://stackoverflow.com/a/41400708/1459275

ฉันใช้ Ubuntu และ Android เท่านั้นและฉันไม่สามารถใช้งานได้ ฉันพบโซลูชันที่ง่ายมากซึ่งคือการอัพเดตไฟล์ package.json ของคุณโดยเปลี่ยนบรรทัดนี้:

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

ถึง

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

จากนั้นคุณเรียกใช้เซิร์ฟเวอร์โดยพิมพ์

npm run start

สิ่งนี้ทำให้แน่ใจว่าอุปกรณ์ android ค้นหาเซิร์ฟเวอร์โหนดบนคอมพิวเตอร์ของคุณแทนที่จะเป็นโลคัลบนโทรศัพท์

คำถามแรกได้รับเกี่ยวกับการโหลดแอพลิเคชันในอุปกรณ์ phyisical

เมื่อคุณทำการดีบั๊กแอปพลิเคชันในอุปกรณ์ทางกายภาพ (เช่นผ่าน adb) คุณสามารถโหลดชุดบันเดิล JS อีกครั้งโดยคลิกที่ปุ่ม "การกระทำ" บนซ้ายของอุปกรณ์ของคุณ จะเป็นการเปิดเมนูตัวเลือก (โหลดใหม่, ดีบัก JS จากระยะไกล ... )

หวังว่านี่จะช่วยได้

ข้อผิดพลาดนี้สามารถแก้ไขได้อย่างง่ายดายโดยทำตามขั้นตอนต่อไปนี้:

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

คุณสามารถปฏิบัติตามคำแนะนำที่ระบุไว้ในหน้าอย่างเป็นทางการเพื่อแก้ไขปัญหานี้ ปัญหานี้เกิดขึ้นบนอุปกรณ์จริงเนื่องจากชุดบันเดิล JS อยู่ในระบบการพัฒนาของคุณและแอปที่อยู่ในอุปกรณ์จริงของคุณไม่ทราบตำแหน่ง

ใน React Native ใหม่ (แน่นอนว่า 0.59) การกำหนดค่าการดีบักอยู่ภายใน 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>

เริ่มต้นเทอร์มินัลสองตัวบนเทอร์มินัลตัวเดียวกันและตัวที่ 1 รันการตอบสนองแบบเนทีฟแบบดั้งเดิม และขอให้โชคดี

เดี๋ยวก่อนฉันกำลังเผชิญปัญหานี้กับโครงการเปล่าตอบสนองพื้นเมืองของฉันจำลอง IOS ทำงานได้ดี แต่ Android ยังคงให้ข้อผิดพลาดนี้ให้ฉัน นี่เป็นวิธีแก้ปัญหาที่เป็นไปได้สำหรับฉัน

ขั้นตอนที่ 1 ตรวจสอบว่าอุปกรณ์ adb ได้รับอนุญาตจากการรันในเทอร์มินัลของคุณ: อุปกรณ์ adb

หากไม่ได้รับอนุญาตให้รันคำสั่งต่อไปนี้

ขั้นตอนที่ 2, sudo adb kill-server ขั้นตอนที่ 3, sudo adb start-server

จากนั้นตรวจสอบว่าคำสั่ง adb devices แสดงรายการอุปกรณ์ที่เชื่อมต่อกับ emulator-5554 หรือไม่

แทนการไม่ได้รับอนุญาตหากเป็นอุปกรณ์แทนการไม่ได้รับอนุญาต

ขั้นตอนที่ 4 เรียกใช้ npx react-native run-android

สิ่งนี้ได้ผลในตัวอย่างของฉันฉันหวังว่านี่จะช่วยแก้ปัญหาของคุณ

ฉันพบว่าสิ่งนี้แปลก แต่ฉันมีทางออก ฉันสังเกตเห็นว่าทุกครั้งในขณะที่โฟลเดอร์โครงการของฉันเป็นแบบอ่านอย่างเดียวและฉันไม่สามารถบันทึกได้จาก VS ดังนั้นฉันจึงอ่านคำแนะนำเพื่อถ่ายโอน NPM จากผู้ใช้ท้องถิ่นไปยังตัวแปรทั่วโลกของระบบ PATH และมันทำงานได้อย่างมีเสน่ห์

การเรียกใช้npm เริ่มต้นจากไดเรกทอรีที่มีปฏิกิริยาตอบสนองได้ผลสำหรับฉัน