O Android falhou ao carregar o pacote JS


201

Estou tentando executar o AwesomeProject no meu Nexus5 (Android 5.1.1).

Eu sou capaz de construir o projeto e instalá-lo no dispositivo. Mas quando eu corro, eu tenho uma tela vermelha dizendo

Não foi possível fazer o download do pacote JS. Você esqueceu de iniciar o servidor de desenvolvimento ou conectar seu dispositivo?

Ao reagir ao iOS nativo, posso optar por carregar o jsbundle offline. Como posso fazer a mesma coisa para o Android? (Ou pelo menos, onde posso configurar o endereço do servidor?)

Atualizar

Para executar com o servidor local, execute os seguintes comandos no diretório raiz do projeto react-native

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

por favor, dê uma olhada na resposta de dsissitka para mais detalhes.

Para executar sem um servidor, agrupe o jsfile no apk executando:

  1. crie uma pasta de ativos em android/app/src/main
  2. curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"

por favor, dê uma olhada na resposta do kzzzf para mais detalhes.


Ainda não entendi o problema. Mas, enquanto isso, você pode experimentá-lo no seu simulador. Está funcionando perfeitamente bem no meu genymotion.
Bryan

Quando tento digitar os dois comandos para executar com o servidor local, recebo um erro no PowerShell dizendo: "O caractere E comercial (&) não é permitido". Eu suponho que eu deveria estar na raiz do meu app-dir ao executar o comando?
user2236165

1
Isso significa que a depuração via USB no Android 4.1 é impossível, pois adb reversenão é suportada?
bonh

Eu gostaria de mencionar que para ser capaz de executar adb reverse tcp:8081 tcp:8081você precisa ADB 1.0.32 versão, reverseopção não está em 1.0.31
jvalen

Respostas:


110

Para agrupar o arquivo JS no seu apk enquanto o servidor está executando ( react-native start), faça o download do pacote no diretório de ativos do seu aplicativo:

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

Com a próxima versão (0.12), corrigiremos o react-native bundlecomando para trabalhar com projetos Android conforme o esperado.


obrigado! Como eu digo ao reactInstanceManager para usar o recurso agrupado? Ou a mágica acontece automaticamente?
Matthew

9
Falha ao criar o Aviso de arquivo: android / app / src / main / ativos / index.android.bundle: Nenhum tal lima ou Atenção: Diretório
almeynman

2
Aviso: falha ao criar o arquivo Aviso: android / app / src / main / assets / index.android.bundle: Não existe esse arquivo ou Aviso: ondulação do diretório: (23) Falha ao escrever o corpo (0! = 16167)
Shivang

3
@Shivang: Crie os ativos de diretório em android / app / src / main. Eu tive esse erro porque ainda não existia.
Piscator

1
Essa é a melhor e mais simples maneira de distribuir o aplicativo localmente para fins de teste. (via fabric) obrigado
Dinesh Anuruddha

90

O seguinte fez funcionar para mim no Ubuntu 14.04:

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

Atualização : Consulte

Atualização 2 : @scgough Recebemos este erro porque o React Native (RN) não conseguiu buscar o JavaScript do servidor de desenvolvimento em execução em nossas estações de trabalho. Você pode ver por que isso acontece aqui:

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

Se o seu aplicativo RN detectar que você está usando o Genymotion ou o emulador, ele tentará buscar o JavaScript em GENYMOTION_LOCALHOST (10.0.3.2) ou EMULATOR_LOCALHOST (10.0.2.2). Caso contrário, presume que você esteja usando um dispositivo e tenta buscar o JavaScript em DEVICE_LOCALHOST (host local). O problema é que o servidor dev é executado no host local da estação de trabalho, não no dispositivo, portanto, para fazê-lo funcionar, você precisa:


5
correndo adb tcp inverso: 8081 tcp: 8081 em obras OSX bem
Shyamal

Funciona! Muito obrigado. Você sabe se existe uma maneira de apontar o jscodelocation para o recurso apk, assim como o main.jsbundle do iOS?
Mateus

@dsissitka posso pedir para que seja gravado aqui no tópico - o que isso faz exatamente?
scgough

@ Matthew Medo não. Desculpe!
dsissitka 15/09/2015

E se estivermos executando o Android 4.2 e obtendo este erro: stackoverflow.com/questions/31525431/…
Augustin Riedinger

39

Ok, acho que percebi qual é o problema aqui. Tinha a ver com a versão que watchmaneu estava executando.

Em um novo shell, execute brew update então: brew unlink watchman then:brew install watchman

agora, você pode executar a react-native startpartir da pasta do projeto

Deixo este shell aberto, crio uma nova janela do shell e corro: react-native run-androidda minha pasta do projeto. Tudo está certo com o mundo.

ps. Eu estava originalmente na versão 3.2 do watchman. Isso me atualizou para 3.7.

pps. Eu sou novo nisso, para que não seja o caminho mais rápido para a solução, mas funcionou para mim.

* MAIS INFORMAÇÕES PARA EXECUTAR / DEBUGGING EM UM DISPOSITIVO *

Você pode achar que, se implantar seu aplicativo no seu dispositivo Android, em vez de um emulador, você verá uma tela vermelha da morte com um erro dizendo Unable to load JS Bundle. Você precisa definir o servidor de depuração para o seu dispositivo para que seu computador esteja executando o react ... ou o nome OU o endereço IP.

  1. Pressione o Menubotão do dispositivo
  2. Selecione Dev Settings
  3. Selecione Debug server host for deviceouChange Bundle Location
  4. Digite o IP da sua máquina e recarregue o JS mais a porta de reação, por exemplo 192.168.1.10:8081

Mais informações: http://facebook.github.io/react-native/docs/running-on-device-android.html


@ jacobross85 Que bom que ajudou! Dê-me um upvote se você sentir como ele ;-)
scgough

1
Tinha que executar brew uninstall watchmanantes de instalar a versão mais recente para mim.
Amozoss

Adicionei um pouco mais de informação para quem estiver depurando em um dispositivo Android em vez de emulador.
scgough

Já estava executando a versão mais recente do watchman, mas isso foi corrigido para mim. Weeeeird
pfac

1
Obrigado por este irmão, é realmente útil. É por isso que eu vou te dar o voto positivo.
Priyank Jotangiya

17

No diretório do seu projeto, execute

react-native start

Emite o seguinte:

$ 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
Também estou tendo o problema relatado pelo OP. Eu executo o projeto usando react-native run-androida pasta do projeto. Ele cria OK no terminal, mas assim que o aplicativo é aberto no meu dispositivo, fico com a tela vermelha dizendoUnable to download JS bundle
#

6
você precisa executar o adb reverse tcp: 8081 tcp: 8081
Matthew

1
Eu executei o adb reverse tcp: 8081 tcp: 8081 e recebo o erro: erro fechado: fechado
JacobRossDev 15/15

1
Estou com o mesmo problema, erro: fechado. Alguma ajuda, por favor?
Eusthace

Verifique se o seu endereço IP está correto em "Configurações do desenvolvedor" se você estiver no Android. Se você estiver trabalhando com um IP dinâmico, isso poderá mudar da noite para o dia.
Sam Purcell

13

Uma solução fácil que funciona para mim com o Ubuntu 14.04.

react-native run-android

O emulador (já iniciado) retornará: Não foi possível baixar o JS Bundle; inicie novamente o servidor JS:

react-native start

Pressione Recarregar JS no emulador. Funcionou para mim. Espero que ajude


Realmente funciona. De todas as respostas, esta é a solução mais simples. Não posso acreditar que isso não esteja no documento oficial.
bluecollarcoder

O OP é sobre a execução em um dispositivo, não no emulador. Essas etapas não funcionam em um dispositivo sem configuração adicional. Veja a resposta aceita.
davidgoli 16/06

8

No aplicativo no Android, abri o Menu (Command + M no Genymotion) -> Configurações do desenvolvedor -> Host do servidor de depuração e porta do dispositivo

defina o valor para: localhost: 8081

Funcionou para mim.


Obrigado! Trabalhou para mim #
286 de Howard

7

Depois de experimentar uma combinação das respostas aqui, é isso que está funcionando para mim.

Estou usando o Genymotion como meu emulador.

1 Inicie o emulador Genymotion.

2 De um 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 Recarregue do emulador.

Carrega!

Agora posso começar a me desenvolver.


ficando Obtendo "Erro: fechado" duas vezes em "adb reversa"
almeynman

FYI: Eu estou agora fazer o acima com a resposta "Daniel Masarin" de definir o host do servidor de depuração para o meu endereço Wi-Fi com a porta 8081, que está trabalhando com RN v 0.17.0
ooolala

muito obrigado Isso funciona para mim :) na API acima 21+ só funciona este
Ashwini Bhat

4

Exclua o aplicativo do seu telefone! Eu tentei várias etapas, mas isso acabou sendo feito.

  1. Se você tentou executar seu aplicativo antes, mas falhou, exclua -o do seu dispositivo Android.
  2. Corre $ react-native run-android
  3. Abra o menu React Rage Shake a partir do seu aplicativo no seu dispositivo Android, vá para Dev Settingse depois para Debug server host & port for device. Digite o IP do servidor (IP do seu computador) e o host 8081, por exemplo 192.168.50.35:8081. Em um mac, você pode encontrar o IP do seu computador em System Preferences -> Network -> Advanced... -> TCP/IP -> IPv4 Address.
  4. Abra o menu Rage Shake novamente e clique em Reload JS.


2

Não tenho reputação suficiente para comentar, mas isso se refere à resposta de dsissitka. Também funciona no Windows 10.

Para reiterar, os comandos são:

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

2

Aqui estão as etapas simples para executar seu aplicativo no Android (versão):

1. Vá para a raiz do seu aplicativo.

2. Execute este comando.

pacote react-native --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

Todos os seus arquivos são copiados.

3. Crie um APK assinado.

Abra o estúdio android.

Compilar> Gerar APK assinado> [Preencha os detalhes necessários, o pressionamento de tecla deve ser gerado antes desta etapa]

Seu APK deve ser gerado sem erros. Instale no seu dispositivo e isso deve funcionar sem problemas.

Você também pode conectar seu dispositivo e clicar diretamente no ícone Executar no android studio para teste.


Gerando pressionamento de tecla:

  1. Vá para C: \ Arquivos de Programas \ Java \ jdkx.x.x_x \ bin

  2. Corre

keytool -genkey -v -keystore d: \ my_private_key.keystore -alias minha-chave-alias -keyalg RSA -chave tamanho 2048 -validade 10000

Provavelmente solicitará que você preencha alguns detalhes. Faça isso e tenha seu arquivo de pressionamento de tecla ( my_private_key.keystore ), que pode ser usado para assinar seu apk.


depois que react-native bundleeu recebi Error: Duplicate resources #
Amir Shabani

1

Eu estava conseguindo isso no Linux depois de interromper o react-native run-androidprocesso. Parece que o servidor do nó ainda está em execução e, na próxima vez em que você o executar, ele não funcionará corretamente e seu aplicativo não poderá se conectar.

A correção aqui é matar o processo do nó que está sendo executado em um Xterm que você pode matar ao ctrl-cabrir essa janela (mais fácil) ou pode encontrá-lo usando-o lsof -n -i4TCP:8081então kill -9 PID.

Então corra react-native run-androidnovamente.


1

Verifique sua conexão wifi.

Outra possibilidade pode ser que você não esteja conectado ao wifi, conectado à rede errada ou o endereço IP esteja errado nas configurações do desenvolvedor. Por alguma razão, meu android se desconectou do wifi e comecei a receber esse erro, sem saber.


Obrigado, foi isso. Por padrão, o servidor de Depuração é alcançado na rede local. Portanto, se você não tiver acesso wifi, não poderá acessá-lo.
Paul

1

Executando no dispositivo

Eu encontrei outra resposta.

  • adb reverse: funciona apenas no Android 5.0 ou superior (API 21).
  • Outro: Abra o menu Desenvolvedor agitando o dispositivo, vá para Configurações do desenvolvedor , vá para Debug host do servidor do dispositivo , digite o endereço IP da sua máquina e a porta do servidor local do desenvolvedor

1

Uma atualização

Agora, no Windows, não é necessário executar o React-Native Start. O empacotador será executado automaticamente.



0

Estou usando apenas o Ubuntu e o Android e não consegui executá-lo. Encontrei uma solução muito simples que é atualizar o arquivo package.json, alterando estas linhas:

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

para

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

E então você executa o servidor digitando

npm run start

Isso garante que o dispositivo Android procure o servidor do nó no seu computador em vez de localmente no telefone.


0

A pergunta inicial era sobre recarregar o aplicativo em um dispositivo físico.

Ao depurar o aplicativo em um dispositivo físico (por exemplo, via adb), você pode recarregar o pacote JS clicando no botão "ação" do lado esquerdo do dispositivo. Isso abrirá o menu de opções (Recarregar, Depurar JS remotamente ...).

Espero que isto ajude.


0

Este erro pode ser facilmente resolvido seguindo as etapas:

    //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
posso executar adb reverse tcp:8081 tcp:8081na pasta raiz do meu aplicativo?
Marson Mao

encontre a pasta adb no seu sistema operacional. está no SDK do Android / ferramentas de plataforma /
Atif Hussain 19/17

1
mas vejo muitos lugares referindo que este comando pode ser executado na pasta raiz do aplicativo, também a resposta por dsissitka sugere que seja executada na pasta raiz do aplicativo, por isso estou realmente confuso.
Marson Mao

Pode ser que este comando seja manipulado pelo react-native também. eu não tenho certeza sobre isso. mas adb é suportado por ferramentas Android SDK. você pode encontrar mais detalhes aqui facebook.github.io/react-native/docs/…
Atif Hussain

1
@MarsonMao Dependendo da configuração do sistema, você poderá executar o adb no diretório do aplicativo. Leia sobre a variável PATH e os pacotes globais x locais para obter mais informações.
Mchandleraz

0

Você pode seguir as instruções mencionadas na página oficial para corrigir esse problema. Esse problema ocorre no dispositivo real porque o pacote JS está localizado no seu sistema de desenvolvimento e o aplicativo dentro do seu dispositivo real não está ciente de sua localização.


0

Na nova configuração de depuração do React Native (com certeza 0,59) está dentro 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

Inicie os dois terminais no mesmo e no primeiro terminal execute reat-native start e no segundo terminal react-native run-android, esse problema é resolvido de maneira simples. E boa sorte


0

Ei, eu estava enfrentando esse problema com meu projeto simples de reação nativa, o simulador IOS funciona bem, mas o Android continuava me dando esse erro. Aqui está uma solução possível que funcionou para mim.

etapa 1, verifique se o dispositivo adb está autorizado executando no seu terminal: dispositivos adb

se não for autorizado, execute os seguintes comandos

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

verifique se o comando adb devices mostra a lista de dispositivos conectados ao dispositivo emulator-5554

em vez de não autorizado, se for um dispositivo, em vez de não autorizado

etapa 4, execute npx react-native run-android

isso funcionou no meu exemplo. Espero que isso resolva seu problema.


0

Achei isso estranho, mas consegui uma solução. Percebi que de vez em quando minha pasta do projeto era somente leitura e não era possível salvá-la do VS. Portanto, li uma sugestão para transferir o NPM do usuário local PATH para a variável global PATH em todo o sistema, e funcionou como um encanto.


Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.