Android에서 JS 번들을로드하지 못했습니다.

Programming

Android에서 JS 번들을로드하지 못했습니다.

procodes 2020. 5. 12. 20:29

Android에서 JS 번들을로드하지 못했습니다.

Nexus5 (Android 5.1.1)에서 AwesomeProject를 실행하려고합니다.

프로젝트를 빌드하고 장치에 설치할 수 있습니다. 그러나 그것을 실행하면 빨간색 화면이 나타납니다.

JS 번들을 다운로드 할 수 없습니다. 개발 서버를 시작하거나 장치를 연결하는 것을 잊었습니까?

네이티브 iOS에 반응하여 jsbundle을 오프라인으로로드하도록 선택할 수 있습니다. Android에서 동일한 작업을 수행하려면 어떻게해야합니까? (또는 적어도 서버 주소는 어디에서 구성 할 수 있습니까?)

최신 정보

로컬 서버로 실행하려면 react-native 프로젝트 루트 디렉토리에서 다음 명령을 실행하십시오.

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

자세한 내용은 dsissitka의 답변을 참조하십시오.

서버없이 실행하려면 다음을 실행하여 jsfile을 apk에 묶습니다.

아래에 자산 폴더를 만듭니다 android/app/src/main
curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"

자세한 내용은 kzzzf의 답변을 참조하십시오.

서버를 실행하면서 react-native start앱의 자산 디렉토리에 번들을 다운로드 하면서 JS 파일을 APK에 묶으려면 :

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

업데이트 : 참조

업데이트 2 : @scgough React Native (RN)가 워크 스테이션에서 실행되는 dev 서버에서 JavaScript를 가져올 수 없기 때문에이 오류가 발생했습니다. 왜 이런 일이 일어나는지 알 수 있습니다.

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

RN 앱이 Genymotion 또는 에뮬레이터를 사용하고 있음을 감지하면 GENYMOTION_LOCALHOST (10.0.3.2) 또는 EMULATOR_LOCALHOST (10.0.2.2)에서 JavaScript를 가져 오려고 시도합니다. 그렇지 않으면 장치를 사용한다고 가정하고 DEVICE_LOCALHOST (localhost)에서 JavaScript를 가져 오려고 시도합니다. 문제는 dev 서버가 장치가 아닌 워크 스테이션의 로컬 호스트에서 실행되므로 작동하려면 다음 중 하나를 수행해야한다는 것입니다.

(장치의 로컬 호스트) : 8081 / tcp에서 (워크 스테이션의 로컬 호스트) : 8081 / tcp로 트래픽을 전달합니다. 그것이 adb 명령이하는 일입니다.
RN 앱에 개발자 서버를 찾을 수있는 곳을 알려주십시오.

좋아, 나는 여기에 문제가 무엇인지 알아 냈다고 생각합니다. watchman내가 실행중인 버전과 관련 이있었습니다.

새 쉘에서 brew update다음을 실행하십시오 brew unlink watchman.brew install watchman

이제 react-native start프로젝트 폴더에서 실행할 수 있습니다

이 쉘을 열어두고 새 쉘 창을 만들고 react-native run-android프로젝트 폴더에서 실행하십시오 . 세상은 모두 옳습니다.

추신. 나는 원래 워치 맨 3.2 버전에 있었다. 이것은 나를 3.7로 업그레이드했습니다.

pps. 나는 이것에 익숙하지 않아 솔루션으로의 가장 빠른 길은 아니지만 그것은 나를 위해 일했다.

* 장치에서 실행 / 디버깅에 대한 추가 정보 *

에뮬레이터가 아닌 Android 기기에 앱을 배포 하면 오류 메시지와 함께 빨간색 화면이 나타납니다Unable to load JS Bundle . 장치의 디버그 서버를 이름 또는 IP 주소 중 하나 인 반응하는 컴퓨터로 설정해야합니다.

장치 Menu버튼을 누릅니다
고르다 Dev Settings
고르다 Debug server host for device
머신의 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 번들을 다운로드 할 수 없습니다. JS 서버를 다시 시작하십시오.

react-native start

에뮬레이터에서 JS를 다시로드하십시오. 그것은 나를 위해 일했다. 그것이 도움이되기를 바랍니다.

안드로이드의 앱에서 메뉴 (Genymotion의 Command + M)-> 개발자 설정-> 장치의 서버 호스트 및 포트 디버그를 열었습니다.

값을 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 에뮬레이터에서 다시로드하십시오.

로드!

이제 개발을 시작할 수 있습니다.

Delete the App from your phone! I tried several steps, but that did it eventually.

If you tried to run your app before but failed, delete it from your android device.
Run $ react-native run-android
Open the React Rage Shake Menu from within your app on your android device, go to Dev Settings and then to Debug server host & port for device. There enter your server IP (IP of your computer) and host 8081, e.g. 192.168.50.35:8081. On a mac you can find the IP of your computer at System Preferences -> Network -> Advanced... -> TCP/IP -> IPv4 Address.
Open the Rage Shake Menu again and click Reload JS.

Apparently adb reverse was introduced in Android 5.0
Getting "error: closed" twice on "adb reverse"

I guess we have to go ahead with kzzzf's answer

I don't have enough reputation to comment, but this is referring to dsissitka's answer. It works on Windows 10 as well.

To reiterate, the commands are:

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

Here are the simple steps to run your app on android(release):

1. Go to your application root.

2. Run this command.

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

All your files are copied.

3. Create signed APK.

Open android studio.

Build > Generate Signed APK > [Fill required details, keystroke has to be generated before this step]

Your APK should be generated without any errors. Install on your device and this should work without any issues.

You can also connect your device and directly hit Run icon on android studio for testing.

Generating Keystroke:

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

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

It will probably ask you to fill in some details. Do it and your have your keystroke file(my_private_key.keystore) which can be used to sign your apk.

I was getting this on Linux after stopping down the react-native run-android process. Seems the node server is still running so the next time you run it, it won't run properly and your app can't connect.

The fix here is to kill the node process which is running in an Xterm which you can kill by ctrl-cing that window (easier) or you can find it using lsof -n -i4TCP:8081 then kill -9 PID.

Then run react-native run-android again.

Check your wifi connection.

Another possibility could be you are either not connected to wifi, connected to the wrong network, or the ip address is wrong in your dev settings. For some reason, my android disconnected from the wifi and I started to get this error, unknowingly.

Running on device

I have found another answer.

adb reverse: only work on Android 5.0+ (API 21).
Another: Open the Developer menu by shaking the device, go to Dev Settings, Go to Debug server host for device, type in your machine's IP address and the port of the local dev server

An update

Now on windows no need to run react-native start. The packager will run automatically.

One important thing to check that no one has mentioned so far: Check your local firewall, make sure it's turned OFF.

See my response here: https://stackoverflow.com/a/41400708/1459275

I am using Ubuntu and Android only, and I was unable to get it running. I found a really simple solution which is to update your package.json file, changing this lines:

"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"
  },

And then you run the server by typing

npm run start

This ensures the android device looks for the node server on your computer instead of locally on the phone.

The initial question was about reloading the application in a phyisical device.

When you're debugging the application in a physical device (ie via adb), you can reload the JS bundle by clicking on the top left "action" button of your device. This will open the option menu (Reload, Debug JS remotely...).

Hope this helps.

This error can easily resolved by following steps:

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

You can follow the instruction mentioned on the official page to fix this issue. This issue occur on real device because the JS bundle is located on your development system and the app inside your real device is not aware of it's location.

In new React Native (for sure 0.59) debug config is inside 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>

Start the two terminal on the same and 1st terminal run react-native start and second terminal react-native run-android this problem are solve in simply way. And best of luck

Running npm start from react-native directory worked out for me.

참고URL : https://stackoverflow.com/questions/32572399/android-failed-to-load-js-bundle

저작자표시 (새창열림)

'Programming' 카테고리의 다른 글

자녀의 자식 값을 기반으로 요소를 선택하는 XPath (0)	2020.05.12
파이썬 클래스의 문자열 표현을 어떻게 변경합니까? (0)	2020.05.12
스프링 부트에서 application.yml 또는 bootstrap.yml에 속성을 넣는 것의 차이점은 무엇입니까? (0)	2020.05.12
Python3에서 '이진 문자열'을 일반 문자열로 변환하는 방법은 무엇입니까? (0)	2020.05.12
사용자가 매핑 한 섹션이 열린 파일에서 요청한 작업을 수행 할 수 없습니다. (0)	2020.05.12

현재글Android에서 JS 번들을로드하지 못했습니다.

procodes

Android에서 JS 번들을로드하지 못했습니다.

Android에서 JS 번들을로드하지 못했습니다.

최신 정보

로컬 서버로 실행하려면 react-native 프로젝트 루트 디렉토리에서 다음 명령을 실행하십시오.

서버없이 실행하려면 다음을 실행하여 jsfile을 apk에 묶습니다.

'Programming' 카테고리의 다른 글

'Programming'의 다른글

티스토리툴바

Android에서 JS 번들을로드하지 못했습니다.

Android에서 JS 번들을로드하지 못했습니다.

최신 정보

로컬 서버로 실행하려면 react-native 프로젝트 루트 디렉토리에서 다음 명령을 실행하십시오.

서버없이 실행하려면 다음을 실행하여 jsfile을 apk에 묶습니다.

'Programming' 카테고리의 다른 글

'Programming'의 다른글

관련글

티스토리툴바