Android không tải được gói JS

Tôi đang cố chạy AwesomeProject trên Nexus5 (android 5.1.1).

Tôi có thể xây dựng dự án và cài đặt nó trên thiết bị. Nhưng khi tôi chạy nó, tôi thấy một màn hình màu đỏ nói

Không thể tải xuống gói JS. Bạn đã quên khởi động máy chủ phát triển hoặc kết nối thiết bị của mình?

Trong phản ứng iOS gốc, tôi có thể chọn tải jsbundle ngoại tuyến. Làm thế nào tôi có thể làm điều tương tự cho Android? (Hoặc ít nhất, tôi có thể định cấu hình địa chỉ máy chủ ở đâu?)

Cập nhật

Để chạy với máy chủ cục bộ, hãy chạy các lệnh sau trong thư mục gốc của dự án gốc

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

vui lòng xem câu trả lời của DSissitka để biết thêm chi tiết.

Để chạy mà không cần máy chủ, hãy đóng gói jsfile vào apk bằng cách chạy:

1. tạo một thư mục tài sản dưới android/app/src/main
2. curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"

vui lòng xem câu trả lời của kzzzf để biết thêm chi tiết.

Để gói tệp JS vào apk của bạn trong khi máy chủ của bạn đang chạy ( react-native start) tải xuống gói vào thư mục tài sản của ứng dụng của bạn:

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

Với phiên bản tiếp theo (0.12), chúng tôi sẽ sửa react-native bundlelệnh để làm việc với các dự án Android như mong đợi.

Sau đây làm cho nó hoạt động với tôi trên Ubuntu 14.04:

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

Cập nhật : Xem

• Chạy trên thiết bị (Android)
• Thiết bị cảnh báo bị đàn áp?

Cập nhật 2 : @scgough Chúng tôi đã gặp lỗi này vì React Native (RN) không thể tìm nạp JavaScript từ máy chủ dev chạy trên máy trạm của chúng tôi. Bạn có thể thấy tại sao điều này xảy ra ở đây:

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

Nếu ứng dụng RN của bạn phát hiện ra rằng bạn đang sử dụng Genymotion hoặc trình giả lập, nó sẽ cố gắng tìm nạp JavaScript từ GENYMOTION_LOCALHOST (10.0.3.2) hoặc EMULATOR_LOCALHOST (10.0.2.2). Mặt khác, nó giả định rằng bạn đang sử dụng một thiết bị và nó cố gắng tìm nạp JavaScript từ DEVICE_LOCALHOST (localhost). Vấn đề là máy chủ dev chạy trên localhost của máy trạm của bạn chứ không phải của thiết bị, vì vậy để làm cho nó hoạt động, bạn cần phải:

• Chuyển tiếp lưu lượng từ (localhost của thiết bị): 8081 / tcp đến (Localhost của Workstation): 8081 / tcp. Đó là những gì lệnh adb làm.
• Nói cho ứng dụng RN của bạn nơi nó có thể tìm thấy máy chủ dev của bạn.

Ok, tôi nghĩ rằng tôi đã tìm ra vấn đề ở đây. Đó là để làm với phiên bản củawatchman tôi đang chạy.

Trong một vỏ mới, chạy brew update sau đó: brew unlink watchman sau đó:brew install watchman

bây giờ, bạn có thể chạy react-native start từ thư mục dự án của bạn

Tôi để cái vỏ này mở ra, tạo một cửa sổ shell mới và chạy: react-native run-android từ thư mục dự án của tôi. Tất cả là đúng với thế giới.

ps. Tôi ban đầu trên phiên bản 3.2 của watchman. Điều này nâng cấp tôi lên 3.7.

pps. Tôi chưa quen với điều này vì vậy có thể không phải là con đường nhanh nhất cho giải pháp nhưng nó đã có hiệu quả với tôi.

* THÔNG TIN THÊM CHO RUNNING / DEBUGGING TRÊN THIẾT BỊ *

Bạn có thể thấy rằng nếu bạn triển khai ứng dụng của mình lên thiết bị Android chứ không phải là trình giả lập, bạn sẽ nhận được màn hình màu đỏ với lỗi báo lỗi Unable to load JS Bundle. Bạn cần đặt máy chủ gỡ lỗi cho thiết bị của mình để máy tính của bạn chạy phản ứng ... tên của nó HOẶC địa chỉ IP.

1. Nhấn Menunút thiết bị
2. Lựa chọn Dev Settings
3. Chọn Debug server host for devicehoặcChange Bundle Location
4. Nhập IP của máy và Tải lại JS cùng với cổng phản ứng, vd 192.168.1.10:8081

Thông tin thêm: http://facebook.github.io/react-native/docs/rasty-on-device-android.html

Từ thư mục dự án của bạn, chạy

react-native start

Nó xuất ra như sau:

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

Một giải pháp dễ dàng phù hợp với tôi với Ubuntu 14.04.

react-native run-android

Trình giả lập (đã được khởi chạy) sẽ trở lại: Không thể tải xuống Gói Bundle; bắt đầu lại máy chủ JS:

react-native start

Nhấn Tải lại JS trên trình giả lập. Nó làm việc cho tôi. Hy vọng nó sẽ giúp

Trong ứng dụng trên Android, tôi đã mở Menu (Command + M trong Genymotion) -> Dev Settings -> Gỡ lỗi máy chủ & cổng máy chủ cho thiết bị

đặt giá trị thành: localhost: 8081

Nó làm việc cho tôi.

Sau khi thử kết hợp các câu trả lời ở đây, đây là những gì đang làm việc cho tôi.

Tôi đang sử dụng Genymotion làm trình giả lập.

1 Khởi động trình giả lập Genymotion.

2 Từ một thiết bị đầu cuối

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 Tải lại từ trình giả lập.

Nó tải!

Bây giờ tôi có thể bắt đầu phát triển.

Xóa ứng dụng khỏi điện thoại của bạn! Tôi đã thử một vài bước, nhưng cuối cùng đã làm được.

1. Nếu bạn đã cố chạy ứng dụng của mình trước đó nhưng không thành công, hãy xóa nó khỏi thiết bị Android của bạn.
2. Chạy $ react-native run-android
3. Mở Menu React Rage Shake từ trong ứng dụng của bạn trên thiết bị Android, đi tới Dev Settingsvà sau đó đến Debug server host & port for device. Ở đó nhập IP máy chủ của bạn (IP của máy tính của bạn) và máy chủ 8081, ví dụ 192.168.50.35:8081. Trên máy mac, bạn có thể tìm thấy IP của máy tính của mình tại System Preferences -> Network -> Advanced... -> TCP/IP -> IPv4 Address.
4. Mở Menu Rage Shake một lần nữa và nhấp Reload JS.

Rõ ràng adb đảo ngược đã được giới thiệu trong Android 5.0
Bắt "lỗi: đóng" hai lần trên "đảo ngược adb"

Tôi đoán chúng ta phải tiếp tục với câu trả lời của kzzzf

Tôi không có đủ danh tiếng để bình luận, nhưng điều này đề cập đến câu trả lời của DSissitka. Nó cũng hoạt động trên Windows 10.

Để nhắc lại, các lệnh là:

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

Dưới đây là các bước đơn giản để chạy ứng dụng của bạn trên Android (phát hành):

1. Đi đến ứng dụng gốc của bạn.

2. Chạy lệnh này.

gói phản ứng gốc - nền tảng android --dev false --entry-file index.android.js --bundle-output android / app / src / main / property / index.android.bundle --assets-Dest android / app / src / chính / res

Tất cả các tập tin của bạn được sao chép.

3. Tạo APK đã ký.

Mở studio android.

Xây dựng> Tạo APK đã ký> [Điền chi tiết cần thiết, tổ hợp phím phải được tạo trước bước này]

APK của bạn phải được tạo mà không có bất kỳ lỗi nào. Cài đặt trên thiết bị của bạn và điều này sẽ hoạt động mà không có bất kỳ vấn đề.

Bạn cũng có thể kết nối thiết bị của mình và nhấn trực tiếp biểu tượng Run trên studio android để thử nghiệm.

Tạo tổ hợp phím:

1. Goto C: \ Tệp chương trình \ Java \ jdkx.x.x_x \ bin

2. Chạy

keytool -genkey -v -keystore d: \ my_private_key.keystore -alias my-key-alias -keyache RSA -keyize 2048 -valid 10000

Nó có thể sẽ yêu cầu bạn điền vào một số chi tiết. Làm điều đó và bạn có tệp tổ hợp phím của bạn ( my_private_key.keystore ) có thể được sử dụng để ký apk của bạn.

Tôi đã nhận được điều này trên Linux sau khi ngừng react-native run-android quá trình. Có vẻ như máy chủ nút vẫn đang chạy nên lần sau khi bạn chạy nó, nó sẽ không chạy đúng và ứng dụng của bạn không thể kết nối.

Cách khắc phục ở đây là để giết tiến trình nút đang chạy trong Xterm mà bạn có thể giết bằng ctrl-ccách sử dụng cửa sổ đó (dễ dàng hơn) hoặc bạn có thể tìm thấy nó bằng cách sử dụng lsof -n -i4TCP:8081sau đókill -9 PID .

Sau đó chạy react-native run-androidlại.

Kiểm tra kết nối wifi của bạn.

Một khả năng khác có thể là bạn không được kết nối với wifi, kết nối với mạng sai hoặc địa chỉ IP bị sai trong cài đặt dev của bạn. Vì một số lý do, android của tôi bị ngắt kết nối với wifi và tôi vô tình bắt đầu gặp lỗi này.

Chạy trên thiết bị

Tôi đã tìm thấy một câu trả lời khác.

• adb đảo ngược: chỉ hoạt động trên Android 5.0+ (API 21).
• Cách khác: Mở menu Nhà phát triển bằng cách lắc thiết bị, đi đến Cài đặt Dev , Chuyển đến máy chủ gỡ lỗi cho thiết bị , nhập địa chỉ IP của máy của bạn và cổng của máy chủ dev cục bộ

Một bản cập nhật

Bây giờ trên windows không cần phải khởi động Reac -igen. Trình đóng gói sẽ tự động chạy.

Một điều quan trọng để kiểm tra rằng cho đến nay chưa có ai đề cập: Kiểm tra tường lửa cục bộ của bạn, đảm bảo rằng nó đã TẮT .

Xem phản hồi của tôi tại đây: https://stackoverflow.com/a/41400708/1459275

Tôi chỉ sử dụng Ubuntu và Android và tôi không thể chạy nó. Tôi đã tìm thấy một giải pháp thực sự đơn giản đó là cập nhật tệp pack.json, thay đổi dòng này:

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

đến

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

Và sau đó bạn chạy máy chủ bằng cách gõ

npm run start

Điều này đảm bảo thiết bị Android tìm kiếm máy chủ nút trên máy tính của bạn thay vì cục bộ trên điện thoại.

Câu hỏi ban đầu là về việc tải lại ứng dụng trong một thiết bị phyisical.

Khi bạn gỡ lỗi ứng dụng trong một thiết bị vật lý (tức là qua adb), bạn có thể tải lại gói JS bằng cách nhấp vào nút "hành động" trên cùng bên trái của thiết bị. Điều này sẽ mở menu tùy chọn (Tải lại, gỡ lỗi JS từ xa ...).

Hi vọng điêu nay co ich.

Lỗi này có thể dễ dàng giải quyết bằng các bước sau:

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

Bạn có thể làm theo hướng dẫn được đề cập trên trang chính thức để khắc phục vấn đề này. Sự cố này xảy ra trên thiết bị thực do gói JS nằm trên hệ thống phát triển của bạn và ứng dụng bên trong thiết bị thực của bạn không biết vị trí của nó.

Trong cấu hình gỡ lỗi React Native (chắc chắn 0,59) nằm bên trong 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>

Bắt đầu hai thiết bị đầu cuối trên cùng một thiết bị đầu cuối và thiết bị đầu cuối chạy phản ứng gốc khởi động và thiết bị đầu cuối thứ hai phản ứng chạy gốc android, vấn đề này được giải quyết theo cách đơn giản. Và may mắn nhất

Này, tôi đã phải đối mặt với vấn đề này với dự án trần phản ứng của mình, trình giả lập IOS hoạt động tốt nhưng Android vẫn gây ra lỗi này. đây là một giải pháp khả thi cho tôi

Bước 1, kiểm tra xem thiết bị adb có được phép hay không bằng cách chạy trong thiết bị đầu cuối của bạn: thiết bị adb

nếu nó là trái phép chạy các lệnh sau

bước 2, sudo adb kill-server bước 3, sudo adb start-server

sau đó kiểm tra xem lệnh thiết bị adb có hiển thị danh sách các thiết bị được gắn trình giả lập-thiết bị 5554 không

thay vì trái phép nếu đó là thiết bị thay vì trái phép

Bước 4, chạy npx Reac -igen run-android

điều này đã làm việc trong ví dụ của tôi, tôi hy vọng điều này sẽ giải quyết vấn đề của bạn.

Tôi thấy điều này là kỳ lạ nhưng tôi đã có một giải pháp. Tôi nhận thấy rằng thỉnh thoảng thư mục dự án của tôi chỉ đọc và tôi không thể lưu nó từ VS. Vì vậy, tôi đã đọc một đề xuất để chuyển NPM từ PATH của người dùng cục bộ sang biến toàn cục PATH trên toàn hệ thống và nó hoạt động như một cơ duyên.

Chạy npm bắt đầu từ thư mục Reac -igen làm việc cho tôi.