React-native: Não foi possível conectar ao servidor de desenvolvimento no emulador Android e no dispositivo real

Criado em 6 ago. 2017  ·  139Comentários  ·  Fonte: facebook/react-native

POR FAVOR, NÃO APAGUE ESTE MODELO ANTES DE LER A PRIMEIRA SEÇÃO.

Isso é um relatório de bug?

É um problema que estou enfrentando ao executar o Awesome Project normal no meu sistema

Se você respondeu "Sim": Esperamos que você demore cerca de 30 minutos para produzir um relatório de bug de alta qualidade. Embora isso possa parecer muito, cuidar dos problemas nos ajuda a corrigi-los mais rapidamente. Para relatórios de bugs, é NECESSÁRIO preencher o restante deste modelo, ou o problema será encerrado. Se você respondeu "Não": Usamos os problemas do GitHub exclusivamente para rastrear bugs no React Native. Se você está procurando ajuda, a página da Comunidade em http://facebook.github.io/react-native/support.html lista vários recursos que devem ajudá-lo a começar. Agora role abaixo!

Você já leu as Diretrizes de Contribuição ?

sim

Ambiente

Por favor, preencha todos os campos relevantes executando estes comandos no terminal.
  1. react-native -v : 0,47,1
  2. node -v :8.2.1
  3. npm -v :4.1.2
  4. yarn --version:

Em seguida, especifique:

Passos para reproduzir

(Escreva seus passos aqui :)

1.Abra o prompt de comando no Modo Administrador
2.execute o comando: cd
comando 3.run: react-native init
4.execute o comando: cd
5.run comando: react-native run-android
isso faz com que o servidor de pacotes seja executado automaticamente na porta 8081. Mas não consigo acessar o servidor de pacotes do navegador na máquina e no celular.
Tentei usar http://:port/index.android.js
http://localhost :porta
http://127.0.0.1 :porta

=> Eu estava recebendo a tela vermelha no celular e no emulador com a seguinte mensagem:
Tentei rodar o projeto no dispositivo real e no emulador. Em Both, recebi o erro: "Não é possível carregar o script dos ativos 'index.android.bundle' Verifique se o pacote está empacotado corretamente ou se você está executando um servidor de pacotes'.

screenshot-1502041340496
screenshot-1502041361543
screenshot-1502041433294

recarregando recebo o erro: "Não foi possível conectar ao servidor de desenvolvimento."

Em seguida, defina o host e o número da porta na configuração de desenvolvimento em ambos e recebi o erro "Não foi possível conectar ao servidor de desenvolvimento".

Comportamento esperado

Espera-se que o projeto seja executado no emulador e no telefone sem nenhum erro.

Mas, em vez disso, recebi o erro e tentei muitas vezes e estou recebendo o mesmo erro repetidamente e no mesmo padrão.

Demonstração reproduzível

(Cole o link para um projeto de exemplo e instruções exatas para reproduzir o problema.)

Ran Commands Locked

Comentários muito úteis

Tente executar:
adb reverse tcp:8081 tcp:8081
em seu prompt de comando e execute novamente seu projeto depois disso.

Todos 139 comentários

Ainda um problema com:
reagir 16.0.0-alfa.6
RN 0,44,3
nó 8.2.1
npm 5.3.0
Código X 8.3.3
Simulador iOS 10.3

Então eu preciso trabalhar na versão anterior destes?

Eu encontro isso, e não posso lidar com isso ....

algo de errado com a versão mais recente?

O empacotador está funcionando? Você deve vê-lo aparecer quando executar react-native run-android . Você também pode iniciá-lo sozinho usando react-native start . Eu gostaria de descobrir se o problema aqui é que o empacotador não está iniciando.

Sim, o empacotador está em execução. Quando eu executo o comando react-native run-android, a janela do node js é aberta informando que o empacotador está sendo executado em 8081 e "Loading Dependency Graph. Done"
Mas quando tento o " localhost:8081/index.android.js " no navegador do sistema, vejo o erro "Este site não pode ser alcançado".

Mas quando eu crio a API nodejs normal e a testo no navegador, ela é aberta com sucesso.

Eu tenho o mesmo problema. Simulador iOS funciona bem, btw

Sempre que tento fazer um novo projeto no RN, é como se a cada vez me deparasse com uma parede de novos bugs.
Próxima tente no próximo mês novamente, eu acho...

o mesmo problema. alguém resolve?

Tente executar:
adb reverse tcp:8081 tcp:8081
em seu prompt de comando e execute novamente seu projeto depois disso.

@ashafizullah : Eu tentei isso também; mas ainda sem sorte.

Acontece no meu aparelho também.

Eu tenho usb conectado, adb invertido e empacotador em execução.

Ao abrir o link a seguir no navegador do dispositivo, ele carrega o pacote com sucesso:

http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false

Então eu suspeito que há algo errado dentro do próprio código Java.

existe alguma solução sobre isso? Eu também estou preso aqui. No projeto IOS funciona perfeitamente

Estou tendo o mesmo problema, e isso é tudo porque o aplicativo Android não tem essa permissão:

<uses-permission android:name="android.permission.INTERNET" />

Portanto, certifique-se de que seu código Android seja capaz de acessar o URL remoto do seu aplicativo.

estou com o mesmo problema ninguem pode resolver isso?

Também estou enfrentando o mesmo problema, se alguém encontrar a solução, por favor poste. Obrigado.

eu tenho o mesmo problema, eu faço adb reserve tcp: 8081 tcp: 8081 e, em seguida, garanto o mesmo computador de rede e celular, e eu faço as configurações de dev IP: 8081, mas não consegui conectar ao servidor de desenvolvimento, quem resolveu esse problema, muito obrigado vocês

Oi, gente. Eu usei console.dir() em react-native e obtive esse comportamento. E eu acho que é normal porque console.dir() é uma função browser.window e nenhum navegador tendo em react-native. Depois de remover console.dir() - meu aplicativo funcionou.

Estou enfrentando o mesmo problema em um Mac, alguma notícia?

eu tenho o mesmo problema no teste do dispositivo.

Android 4.1.2

Ei. Pessoal, quem tem versão do Android menor que 5.0, já tentou usar conexão wifi em vez de usb? Meu aplicativo inicia normalmente no android 4.3 (Huawei mediapad T1 8.0) após ter sido conectado via wifi

tive esse problema, para mim acabou sendo a porta 8081 que estava sendo usada pelo postgresSQL

Tenho o mesmo problema hoje.
Android 4.4.2 e 6.

Mesmo problema aqui também. Acontece toda vez que reabro meu Mac após um curto período de suspensão. Alguém resolveu isso?
adb reverse tcp:8081 tcp:8081 - isso não parece funcionar para mim

screen shot 2017-10-17 at 8 20 03 am

Meu erro foi resolvido alterando os limites de inotify.
Este link ajudou https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers

o mesmo este problema, me ajude

Também estou tendo o mesmo problema ao tentar executá-lo do localhost. Funciona no navegador e no emulador, mas não no dispositivo físico

Mesmo problema aqui para Android, tanto do dispositivo quanto do emulador. Não consigo conectar ao empacotador. Fazendo o "adb reverse..." para dispositivo físico. Também executando na porta personalizada, fazendo "react-native start --port 8088" e definindo o IPaddress:8088 na configuração dev no aplicativo.

PERGUNTA: Existe uma maneira de encontrar falha na conectividade entre o aplicativo (no meu dispositivo Android) e o empacotador em execução no Windows PC?

Isso é tudo o que vejo são as indicações de erro do tipo "não é possível conectar" e não noto nenhuma mensagem de log no empacotador. \

ATUALIZAÇÃO: a execução de "adb reverse --list" mostrou que eu tinha duas entradas reversas. Parece que depois que eu corrigi isso as coisas funcionaram. Eu ainda tenho apenas uma "página em branco", no entanto, acho que é outro problema.

Mesmo problema com Android, iOS funciona ...

como isso pode acontecer
eu também encontrei o mesmo problema,
mas anteriormente tudo funciona bem para mim
então eu recebo um loop infinito que torna minha área de trabalho bastante lenta
então eu decidi fechar o emulador e o metro bundler que eu recebo no início react-native
eu tentei este código abaixo, mas sem sorte
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

Estava enfrentando o mesmo problema e desperdiçou alguns dias por trás disso. Acontece que a porta padrão 8081 foi bloqueada na minha máquina. Mudou a porta conforme as instruções aqui https://github.com/facebook/react-native/issues/10715 e agora funciona.

Vocês podem tentar abrir este URL no navegador da web do dispositivo?

http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false

@kevinresol , se o gerenciador de pacotes disser que foi iniciado na porta 8081 e você não conseguir acessá-lo no navegador, provavelmente a porta está bloqueada pelo firewall. Apenas tente alterar a porta padrão ou veja se você pode abrir a porta.

Conforme mencionado no meu post anterior , posso acessar o bundle pelo navegador do dispositivo.

Estou tendo exatamente o mesmo problema que @kevinresol. Eu posso ver o pacote no navegador, mas o erro persiste. Estou em um emulador, mas ainda tentei adb reverse, mas sem sorte.

@bruno02100 se você estiver no Windows e acessando via wifi, tente desabilitar seu firewall. Veja se isso resolve o problema.

@jerrykurian Estou no Mac executando o emulador do Android. Meu firewall já está desativado. É realmente estranho.

Depois de configurar Debug server host & port for device para 192.168.x.x:8081 em Dev Settings (Shark the phone, ele irá abrir o menu)
É trabalho para mim

PS: NÃO é necessário criar nenhum pacote manualmente, ele será construído automaticamente quando conectado com sucesso

Acho que qualquer problema de wifi ou solução wifi está fora do tópico. OP estava falando sobre conectar-se a localhost através de USB com adb reverse

Percebi que esse erro só acontece depois que o emulador está ativo por algum tempo. Então, por enquanto, toda vez que esse erro aparece, eu reinicio meu emulador e executo o react-native run-android. É realmente chato, mas eu não tenho muito tempo para analisar isso, então terá que servir.

Eu posso me conectar ao servidor de desenvolvimento após a compilação via android studios, mas se eu atualizar o código quando edito o código, meu dispositivo ou emulador não pode se conectar ao servidor.

Minhas dependências
"reagir": "16.0.0",
"react-native": "0.50.4",

Posso confirmar que a solução de @xlebenny de configurar manualmente o host e a porta do servidor de depuração no dispositivo funcionou para mim em um projeto CRNA recém-ejetado.

Passo a passo para ejetar e executar um CRNA no Android

No terminal:

  1. create-react-native-app myApp
  2. cd myApp
  3. yarn run eject (usei as opções padrão "projeto React Native regular")
  4. react-native run-android

(agora o aplicativo deve ser compilado e instalado no telefone)

Ao telefone:

  1. execute o aplicativo (espere ver a tela de erro vermelha! - clique no botão Dispensar no canto inferior esquerdo)
  2. Agite o telefone e escolha Configurações do desenvolvedor
  3. Escolha o host e a porta do servidor de depuração para o dispositivo e defina como 192.168.xx:8081 (torne-o seu IP real da LAN, é claro)
  4. Reinicie o aplicativo no telefone e você verá a barra verde na parte superior "Carregando de 192.168.xx:8081..."
  5. Você também deve ver alguma ação "Bundling index.js " no Metro Bundler (que abriu ao executar react-native run-android )
  6. Após a conclusão do pacote, o aplicativo deve estar sendo executado no seu dispositivo Android!

O Live Reload (quando os arquivos de origem mudam) ainda é possível - basta agitar o telefone e tocar em "Ativar Live Reload"

@ashafizullah você poderia explicar como esse comando resolveu o problema. obrigado

@plong0 resolveu para mim!

Conforme apontado por @bruno02100 , parece que esse erro aparece se o dispositivo for aberto por um longo período de tempo. Desabilitar a inicialização rápida na configuração do emulador resolveu para mim 👍

Digite adb shell e veja se ele está escutando no seu servidor local? configure o ip e a porta do servidor nas configurações dev. Deve corrigir isso.

@plong0 obrigado pela ajuda, mas não me ajudou.
Não consigo executar meu aplicativo no dispositivo Android usando MAC.

@ramintagizade - como verifico se o aplicativo escuta no meu servidor local? qual é o comando:
adb shell [command] ?

Sim, shell adb e netstat.

com base neste http://facebook.github.io/react-native/docs/running-on-device.html

acesse seu endereço IP local (ex: http://192.168.43.188:8081/) do seu navegador e verifique se ele mostra

O empacotador React Native está em execução.
Acesse a documentação

em seguida, acesse as configurações dev no seu emulador:
dev-settings

Para os usuários de Mac, você pode seguir as etapas abaixo,
Etapa 1: execute "adb reverse tcp:8081 tcp:8081 "
Passo 2: Pressione "comando m"
Etapa 3: pressione em "Configurações do desenvolvedor"
Etapa 4: pressione "Depurar host e porta do servidor para dispositivo"
Passo 5: No pop up digite "10.0.2.2:${port_id}" na seção 'port_id' use a porta que você está executando seu aplicativo.
Passo 6: Agora execute "react-native run-android"

se você estiver tentando depurar o aplicativo em seu dispositivo Android físico por wifi usando uma máquina Windows, o dispositivo pode não conseguir acessar a porta do seu PC ou laptop,
você tem que tornar a porta acessível. isso envolve duas etapas:

1.Primeiro crie uma regra no firewall. para isso siga os seguintes passos:

```
caixa de diálogo de execução aberta
-digite wf.msc
-clique em regras de entrada
-clique em nova regra no lado direito
-selecione a porta no menu pop-up e clique em próximo
-selecione a porta tcp e portas locais específicas e digite o número da porta como 8081 (padrão)
-permitir a conexão
-selecione tudo na seção de perfil
-dar algum nome e descrição apropriados
-clique em terminar

  1. você tem que tornar seu pc acessível para fora, para isso siga os seguintes passos:
    -abra o centro de rede e compartilhamento do painel de controle
    -alterar as configurações do adaptador
    -selecione sua rede wifi
    -clique direito, propriedades
    -clique na aba de compartilhamento
    -marque todas as caixas de seleção

Você está pronto para ir, agora tente executar react-native run-android.

Tive um problema semelhante, embora mais tarde tenha percebido que meu dispositivo emulado (android) não tinha conexão com a Internet (ou rede). Ele não tinha um símbolo WiFi ou LTE. Reiniciar o emulador não resolveu o problema, mas colocá-lo no modo avião e desligar o modo avião novamente resolveu. Pode ser um bug geral do Android de perder a conexão de rede no meu caso.

Enfrentamos esse problema, para corrigir isso, a solução é simples e está abaixo.

  1. Cancele o processo atual de “react-native run-android” por CTRL + C
    ou CMD + C
  2. Feche a linha de comando da janela do metro bundler que foi aberta
    automaticamente.
  3. Execute o comando novamente, “react-native run-android”.

Basicamente, esse erro informa que sua compilação atual falhou devido a motivos como problema de código ou problema de dependência.

Clique aqui para mais detalhes

Não tenho certeza do que causou meu problema com emuladores Android no macOS. Talvez configurar novos AVDs do Android ou instalar várias atualizações do Android Studio?

Este comando estava pendurado:
watchman watch-del-all

Isso resolveu o problema para mim:
````
brew desinstalar vigia
brew instalar vigia

E só para ter certeza de que o watchman delete não está pendurado

watchman watch-del-all
````

Eu poderia resolver esse problema reiniciando o emulador finalmente.

Finalmente encontrei meu problema.
No meu caso, foi para a configuração do proxy do meu emulador.
Basta ir às configurações do emulador e não definir proxy.

Espero que possa ajudar

Olá a todos,
Encontrei o mesmo problema ao executar no ambiente Windows e simular usando o simulador Android.
Depois de fazer algumas tentativas e erros, encontrei a solução abaixo:

1>> Altere a porta em "node_modules\react-native\local-cliserverserver.js" do padrão:

process.env.RCT_METRO_PORT || 8081

para

padrão: process.env.RCT_METRO_PORT || 9088

se a porta estiver bloqueada ou emitida para algum outro aplicativo.
Nota : Você pode escolher qualquer número de porta, eu escolhi 9088
2>> Execute o comando react-native run-android --port 9088 (Coloque o número da sua porta aqui). Esta porta deve ser enviada para o adb running, de modo que o servidor e o adb estejam na mesma porta.
3 >> Agora no simulador de estúdio Android, pressione Ctrl + m, para ir para " Dev Setting ", selecione Debug Server port & host for Device , defina " localhost:9088 ".
4>> Abra o console do desenvolvedor no chrome usando a url http://localhost :9088/debugger-ui/

Agora ele começará a carregar as alterações feitas em seu aplicativo.

Aproveite a codificação agora :)

Obrigado por postar isso! Parece que você não está usando a versão mais recente do React Native, v0.53.0, lançada em janeiro de 2018. Você pode garantir que esse problema ainda possa ser reproduzido na versão mais recente?

Vou fechar isso, mas sinta-se à vontade para abrir um novo problema se você puder confirmar que isso ainda é um problema na v0.53.0 ou mais recente.

Como contribuirO que esperar dos mantenedores

Sim, estou usando "react-native": "0.53.0".

Mas esse problema veio, quando eu estava usando dentro do proxy corporativo. Pode ser que algumas portas estejam bloqueadas ou usadas pela empresa. Então eu usei essa maneira para resolver. E postado aqui, para que outros possam resolver esse problema.

Mesmo problema no dispositivo real Android.. Versão 5.1.1

Simplesmente abra o prompt de comando e vá para o diretório do projeto, digite 'yarn' e pressione enter, tudo ficará bem

@ashafizullah sua solução funciona !!!!

Seja simulador ou dispositivo real, para android, basta fazer como abaixo:
image

@Alijaaan mesmo problema que eu estava tendo aparentemente. Obrigado!

A única solução que encontrei é no Android studio AVD Manager , remover seu emulador atual e adicionar um novo. Todos começam a funcionar novamente.

Muito obrigado @Alijaaan
Ele estava usando a configuração de proxy do Android Studio.
image
Desmarquei a opção "usar configuração de proxy do Android studio" e selecionei "Sem proxy". Tudo está bem agora.

O comentário de @esutton resolveu meu problema.

BTW watchman é meu software favorito. Eu sempre ficava feliz em pausar meu dia por algumas horas para caçar problemas aleatórios de RN e perceber que tudo o que preciso fazer é executar watchman watch-del-all . Agora, mesmo esse comando trava e temos que reinstalá-lo ocasionalmente, sou um desenvolvedor ainda mais feliz.

react-native run-android --port 9088 funcionou para mim. Obrigado @Louies89

eu encontro solução
1.desative meu antivírus
2feche meu firewall

Eu acho que é um problema com as mudanças recentes no código, especialmente se você estiver usando uma biblioteca de terceiros como a base nativa. o que eu fiz, voltei alguns passos Ctrl + z , desinstale o aplicativo do emulador e reinicie-o. então react-native run-android e tudo funciona! talvez tenha algo a ver com o cache do emulador

@pinchez254 concordo com você. A primeira execução sempre será boa.

Por favor, inicie o servidor npm usando o comando npm start

Olá, coloquei o ip do meu pc no Dev Setting (192.168.1.103:8081) e crio uma regra de entrada no firewall para acessar a porta 8081 tcp, mas recebo este erro:
"could not connect to development serve"
TB
quando digitar no navegador "http://localhost:8081/index.delta?platform=android&dev=true&minify=false" , a compilação foi iniciada e concluída com sucesso!

Para mim executando:

  1. adb reverse tcp:8081 tcp:8081
  2. react-native start --reset-cache
  3. react-native run-android

fez o truque

Tive que abrir dois terminais.
Primeira corrida
sudo npm start
Depois de correr
react-native run-ios

  1. Certifique-se de que seu laptop e seu telefone estejam na mesma rede Wi-Fi.
  2. Vá para a pasta do seu projeto através do shell. Então execute react-native run-android , react-native start --port=8088
  3. Abra seu aplicativo React Native no seu dispositivo.
  4. Abra o menu do desenvolvedor no aplicativo. Pressione [cmd] + [M] ([Ctrl] + [M] para windows)]
  5. Vá para Dev Settings → Debug server host para o dispositivo.
  6. Digite o endereço IP da sua máquina e a porta do servidor de desenvolvimento local (por exemplo, 192.168.1.100:8088).
  7. Volte para o menu Desenvolvedor e selecione Recarregar JS.

react-native run-android --port=8081 :)

A única maneira que consegui resolver foi - pesquisei todas as referências à porta 8081 e mudei para 9088 (não usada) e comece com -- porta 9088. Também alterei a configuração do Dev para a porta 9088. Havia poucas referências à porta 8081 como padrão em node_module/react-native dir. A porta 8081 foi usada pelo protetor de vírus no meu ambiente.

Para mim, as ferramentas da plataforma Android não foram instaladas. Então eu instalei usando o seguinte comando.
brew barril instalar ferramentas de plataforma android

Depois disso, a execução do Android studio ou da linha de comando com * react-native run android * funcionou

A reinicialização do meu Mac resolveu isso para mim, não faço ideia do porquê

em primeiro lugar, depois de certificar-se de que você está no seu arquivo de projeto, esta solução me ajuda:
react-native start
provavelmente você receberá um erro com o código ENOSPC
neste caso, use este código:
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
depois disso, você executa react-native start novamente e provavelmente terá seu erro ENOSPC resolvido.
em seguida, basta executar react-native run-android
lá está, funciona para mim no linux com o emulador android do android studio

estava com esse erro,
Eu encontrei uma solução fazendo isso.
primeiro eu deletei todos os módulos do nó.
sudo rm -rf node_modules/
então eu instalei os pacotes npm novamente
npm install

então eu executo este comando para verificar se os pacotes react estão ok.

react-native start

ele me mostra que os pacotes estão ok e então eu executo o android com root

react-native run-android --root

então eu descobri que isso está funcionando.

Observe também que, a partir do Android 9, as transferências HTTP (não HTTPS) de texto simples são proibidas por padrão. Para habilitar a conexão com o servidor de desenvolvimento de um dispositivo executando seu aplicativo, adicione este atributo ao elemento application no arquivo _AndroidManifest.xml_:

android:usesCleartextTraffic="true"

Mais informações sobre este problema do Stackoverflow

Você pode testar para ver se seu dispositivo pode acessar seu servidor de desenvolvimento digitando URLs no navegador da Web nativo.

Infelizmente, as ferramentas de desenvolvimento nativas do react engolem o motivo do erro, mas ele aparece se você tentar fazer sua própria conexão HTTP dentro do aplicativo de destino, onde obterá um rastreamento de pilha útil.

@delj É lamentável que as ferramentas de desenvolvimento nativas de reação engolem o motivo do erro.

Dica: use manifestPlaceholders para evitar fazer um lançamento com android:usesCleartextTraffic= "true"

AndroidManifest.xml
````
android:name= ".MainApplication"

android:usesCleartextTraffic="${isDebug}"
    >

````

android/app/build.gradle

 buildTypes {
 depurar {
 manifestPlaceholders = [isDebug:true]
 }
 lançamento {
 manifestPlaceholders = [isDebug:false]

        minifyEnabled enableProguardInReleaseBuilds
        proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        signingConfig signingConfigs.release
    }
}

Eu tive o mesmo problema e o que funcionou para mim no Windows 10 é literalmente apenas abrir o CMD como administrador.

ainda tenho esse problema. Podemos abrir isso de volta. Isso é totalmente ridículo, como é um tutorial "Começar" se você seguir os passos ao pé da letra e não iniciar. Eu literalmente passei horas com esse bug. O Facebook precisa resolver isso. Ou o tutorial deles é apenas PURE WRONG ou casos bem conhecidos de solução de problemas aos quais eles podem vincular.

Aqui estão meus passos:

  1. terminal 1: adb reverse tcp:8081 tcp:8081
  2. terminal 1: npm start
  3. run-android nativo de reação

Ainda tem esse problema. Também tentei adicionar o valor da porta quando executo a etapa 3, mas também não funcionou. Alguém pode por favor ajudar.

Eu simpatizo completamente - acabamos de passar uma hora consertando isso também.

Isso funciona para o simulador e acho que a mesma abordagem deve funcionar para o seu dispositivo

Há alguns problemas acontecendo aqui, sendo o mais importante a configuração de texto simples. Antes de fazer qualquer coisa, atualize seu aplicativo para o Android SDK mais recente ou essas configurações não funcionarão. Para testar se você tem esse problema, cole este código em uma de suas funções de renderização superiores. Ex <App

fetch('http://jofarnold.com')
  .then(res => res.text())
  .then(d => alert('ok'))
  .catch(e => {
    console.error(String(e));
});

Observe o http e não o https . Sim, meu site não é http. Mas agora não me arrependo!

Agora tente

fetch('https://httpbin.org')
  .then(res => res.text())
  .then(d => alert('ok'))
  .catch(e => {
    console.error(String(e));
});

Observe o http s .

Qual falha? Se ambos falharem, você terá outros problemas e não posso ajudá-lo - mas tente ver se esses URLs funcionam no Chrome em seu simulador para descartar que a rede não funcione. Se o primeiro falhar (dará uma redbox nativa de reação), mas o segundo for bem-sucedido (ele alertará com ok ), você não configurou as configurações de segurança do Android corretamente. Então vamos fazer isso.

Em primeiro lugar, digite o seguinte em android/.../AndroidManifest.xml na seção <application

<manifest
....
<application
... other settings
    android:usesCleartextTraffic="true"  <---------- this
    android:networkSecurityConfig="@xml/network_security_config" <------- and this
  >
   ... etc

Em seguida, crie um arquivo em android/...res/xml/network_security_config.xml (talvez seja necessário adicionar o diretório xml: o nome do arquivo não é nada especial - só precisa ser o mesmo que a referência acima) assim :

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">jofarnold.com</domain>
    </domain-config>
</network-security-config>

Recompile certificando-se de fazer react-native start --reset-cache em um terminal (observando o cache de redefinição) e react-native run-android em outro.

Agora que você carrega o aplicativo, você obterá um pop-up ok. Coisa boa! Você conseguiu fetch meu site inseguro.

Agora temos que resolver reagir nativo. Para mim, o servidor está em 10.0.2.2 e o depurador em localhost ou algo assim (não me lembro; estou escrevendo isso parcialmente da memória). De qualquer forma eles são diferentes e por isso não funciona.

Para isso, altere o jofarnold.com acima para localhost e, em seguida, vá para o menu de configurações do aplicativo (cmd-M no mac) > Configurações do desenvolvedor. Desative "Usar JS Deltas" (não funciona bem) e, em Depuração, defina o host e a porta do servidor para localhost:8081

Seu arquivo de configuração de segurança deve ficar assim:

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">localhost</domain>
    </domain-config>
</network-security-config>

Recompile, reinicie react-native start --reset-cache e você obterá a barra verde na parte superior do aplicativo com o loading... ou o que for. No terminal, você deve vê-lo agrupado com Delta, Map e assim por diante.

Você não precisa fazer as coisas adb reverse eu acho. É feito como parte dos scripts RN de qualquer maneira.

Boa sorte!

Meu problema era porque eu tinha meu emulador android desconectado do Wifi e dos dados. Acabei de ligar esses e ele funciona. Espero que ajude se alguém estiver enfrentando o mesmo problema.

image

Meu problema era porque eu tinha meu emulador android desconectado do Wifi e dos dados. Acabei de ligar esses e ele funciona. Espero que ajude se alguém estiver enfrentando o mesmo problema.

Uma coisa importante que devo acrescentar ao comentário de Mateo; se você fechar o seu MacBook e continuar em outra rede wifi, isso pode fazer com que o "wifi" do simulador falhe. Você deve reiniciar o simulador. Eu sei que isso não é um problema para o simulador especificamente, mas ele tem um bom SEO para este assunto, então espero que deixar este comentário aqui ajude mais alguém.

resolvido usando android 5.0 ou superior, tem erro no android 4..4

resolvido usando android 5.0 ou superior, tem erro no android 4..4

eu concordo

Se você estiver executando um emulador do Android 9, será necessário adicionar, conforme indicado por @delj , android:usesCleartextTraffic="true" em sua tag Application em manifest.xml

O empacotador está funcionando? Você deve vê-lo aparecer quando executar react-native run-android . Você também pode iniciá-lo sozinho usando react-native start . Eu gostaria de descobrir se o problema aqui é que o empacotador não está iniciando.

Por que está acontecendo esse problema?? Eu tenho um mac com OS 10.13.6 e antes do servidor iniciar automaticamente

Obrigado @JofBigHealth Fiz como você sugeriu e funciona no emulador e no dispositivo real de conexão.
Mas estou tendo problemas com o aplicativo ao baixá-lo do canal alfa. você tem alguma sugestão para depurá-lo?

@sheva007 Não tenho certeza do que você quer dizer com "canal alfa". Você pode explicar e também incluir mais detalhes sobre quais problemas você está tendo especificamente?

@JofBigHealth desculpe a falta de informações.
ATUALIZAÇÃO: deu certo agora, só tive que esperar algum tempo até que o Google Play disponibilizasse a versão de trabalho atualizada para os testadores. Muito obrigado :)
meu problema original era que o aplicativo está funcionando bem < Android 9, mas não fará uma chamada de rede com o Android 9, quando usei sua solução, o aplicativo incluindo chamadas de rede funciona conforme o esperado.
mas quando o enviei para o Google Play Alpha Channel. ele não faz as chamadas de rede.

reverter as portas funcionou para mim
como sugerido por @ashafizullah

Fechar o Android Studio, que eu tinha aberto, resolveu o problema para mim estranhamente. Incerto porque...

ATUALIZAÇÃO: para o simulador a partir da atualização para 0.57.7 não achei necessário fazer a correção do proxy reverso adb , nem alterar a porta no menu do desenvolvedor. O padrão é algo como 10.0.1.1:8080 (adivinhe de memória) e apenas funciona. Eu corro react-native start ou react-native start --reset-cache (se necessário) e construo a partir do Android Studio e funciona muito bem. Se você o configurou para depuração, deve ter um depurador em execução e pode ser necessário compilar novamente a partir do Android Studio, pois às vezes ele não se conecta pela primeira vez (devido ao que suspeito ser uma condição de corrida), mas tudo bem. Apenas lembre-se de definir as configurações de segurança corretamente no manifesto do aplicativo

Dispositivo é outra questão.

Tem o mesmo problema quando tentou iniciar no dispositivo. Existe alguma solução para o dispositivo?

Eu tenho o mesmo problema. Por favor me ajude.

você deve adicionar um caminho em suas variáveis ​​de ambiente ... caminho "adb", você pode encontrá-lo em C:Users\user\AppData\Local\Android\Sdk/platformtools

Isso funcionou para mim no Windows 10: (Depois de configurar o host e a porta do servidor de depuração .. )
Verifiquei minhas configurações de firewall (Firewall do Windows>Permitir um aplicativo ou recurso pelo Firewall do Windows) e descobri que existem DOIS aplicativos Node.js, mas um deles não é permitido pelo firewall! Marquei a caixa e salvei então tudo funcionou como deveria!

Se você estiver executando um emulador do Android 9, será necessário adicionar, conforme indicado por @delj , android:usesCleartextTraffic="true" em sua tag Application em manifest.xml

Recomendado

Mesmo erro.
windows7+android studio3.3.2.
O servidor do nó está ativo e eu posso vivsit 127.0.0.1 do simulador chrome, mas o aplicativo Awesome não pode se conectar ao servidor do nó.
Eu também adicionei android:usesCleartextTraffic="true" ao AndroidManisfesto.xml, mas ainda recebi o erro

image
image
image
image
image
image
image
image

@aflext Você executou o comando adb reverse tcp:8081 tcp:8081 na caixa vermelha? Isso geralmente funciona.

@JofBigHealth Ao alterar o URL de 127.0.0.1:8081 para localhost:8081 resolveu.

No meu caso, a solução foi Desabilitar/Habilitar "Depurar JS Remotamente"

@ashafizullah : Eu tentei isso também; mas ainda sem sorte.

@ashafizullah sim, não está funcionando comigo também.

pode ser possível executar este projeto através do windows????

Meu erro foi resolvido alterando os limites de inotify.
Este link ajudou https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers

ISSO FUNCIONA!! MUITO OBRIGADO!!

Meu erro foi resolvido alterando os limites de inotify.
Este link ajudou https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers

Isso funcionou para mim. Obrigado, cara.

Adicionei android:usesCleartextTraffic="true" a AndroidManifest.xml na tag <application ... e reconstruí o aplicativo. Depois disso, ele começou a carregar do servidor dev normalmente.

Isso estava acontecendo comigo porque eu tinha o Debugger em execução e conectado a outro dispositivo. Portanto, o simulador iOS conectado ao depurador estava bloqueando a conexão do dispositivo Android ao empacotador. Interromper a depuração remota no simulador do iOS permitiu que o dispositivo Android se conectasse, ou você também pode iniciar a depuração remotamente no dispositivo Android.

Isso funcionou para mim no Windows 10: (Depois de configurar o host e a porta do servidor de depuração .. )
Verifiquei minhas configurações de firewall (Firewall do Windows>Permitir um aplicativo ou recurso pelo Firewall do Windows) e descobri que existem DOIS aplicativos Node.js, mas um deles não é permitido pelo firewall! Marquei a caixa e salvei então tudo funcionou como deveria!

Este foi o meu problema também, obrigado!

resolvi com:

https://www.youtube.com/watch?v=XhiE0HEiYd4

https://stackoverflow.com/questions/44446523/unable-to-load-script-from-assets-index-android-bundle-on-windows

mas.... quando recarrego o app no ​​emulador, trava novamente e mostra a mensagem:
NÃO PODE CONECTAR AO SERVIDOR DE DESENVOLVIMENTO

Então tentei adicionar node.js e genymotion player.exe no firewall e reiniciei tudo (geny, react), e funcionou novamente...

ctrl+Win cmd linha de comando ipconfig para encontrar o endereço ipV4 meu é 192.168.0.111, depois disso coloquei 192.168.0.111:8081 em
image
image

Resolvido com sucesso!

Adicionei android:usesCleartextTraffic="true" a AndroidManifest.xml na tag <application ... e reconstruí o aplicativo. Depois disso, ele começou a carregar do servidor dev normalmente.

Isso resolveu. Obrigado uma tonelada.

Tenha o mesmo problema apenas no dispositivo Android real.
Solução:
1) Adicione o arquivo android/app/src/main/res/xml/network_security_config.xml

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">localhost</domain>
    </domain-config>
</network-security-config>

2) Adicione linha a android/app/src/main/AndroidManifest.xml

<application
    ...
    android:networkSecurityConfig="@xml/network_security_config"
    ...
>

Encontre a cura.
Esse problema me ajudou a resolver o problema nas etapas a seguir.

  1. (no diretório do projeto) mkdir android/app/src/main/assets
  2. pacote react-native --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src /principal/res
  3. run-android nativo de reação

https://stackoverflow.com/questions/44446523/unable-to-load-script-from-assets-index-android-bundle-on-windows

Funcionou para mim depois de executar adb reverse tcp:8081 tcp:8081 . Anteriormente, estava abrindo a janela do servidor de pacotes, mas nada estava acontecendo após o carregamento do gráfico de dependência, feito. mensagem.
Agora tudo funciona bem depois de executar o comando acima mencionado.

Isso é aplicável ao Android 9.0+ de acordo com a Configuração de segurança de rede .
Bem, depois de tentar todas as soluções possíveis que encontrei na web, decidi investigar manualmente o logcat nativo do Android. Mesmo depois de adicionar android:usesCleartextTraffic="true" , encontrei isso no logcat:

06-25 02:32:34.561 32001 32001 E unknown:ReactNative: Caused by: java.net.UnknownServiceException: CLEARTEXT communication to 192.168.29.96 not permitted by network security policy

Então, tentei inspecionar a fonte do meu aplicativo nativo de reação. Descobri que na variante debug , já existe uma configuração de segurança de rede que é definida por caras nativos de reação, que entra em conflito com a variante main .

Há uma solução fácil para isso.
Vá para <app-src>/android/app/src/debug/res/xml/react_native_config.xml
Adicione uma nova linha com seu próprio endereço IP noComo:

<?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 includeSubdomains="false">192.168.29.96</domain>***
  </domain-config>
</network-security-config>

Como o IP local do meu computador (verifique de ifconfig para linux) é 192.168.29.96, adicionei a linha acima em *

Então, você precisa limpar e reconstruir para Android!

cd <app-src>/android
./gradlew clean
cd <app-src>
react-native run-android

Espero que isso funcione pra você.

O que eu fiz: (trabalhando no emulador Android Pie 9)

  1. Defina o IP e a porta em Debug server host & port for device clicando em Ctrl+M e Dev Setting no emulador. Certifique-se de definir o host e a porta usando o host e a porta do Bundler (padrão: localhost:8081 ) e certifique-se de que sua porta não esteja bloqueada por outro processo
  2. Execute adb reverse tcp:8081 tcp:8081 no diretório do projeto inicial
  3. Adicione android:usesCleartextTraffic="true" ao nó <application> em AndroidManifest.xml
  4. Depois de realizar três pontos acima, reinicie seu projeto

@ Eyesonly88 isso resolveu o problema para mim - obrigado.

Para você que está enfrentando esse problema especificamente ao configurar seu targetSdkVersion para API 28.

Tudo o que você precisa fazer é adicionar ao seu arquivo network_security_config as seguintes linhas abaixo:

    <base-config cleartextTrafficPermitted="true">
        <trust-anchors>
            <certificates src="system" />
        </trust-anchors>
    </base-config>

PS: No meu caso tenho vários arquivos network_security_config para cada sabor, já que este é um problema de depuração, adicionar essas linhas ao arquivo network_security_config no sabor de depuração foi suficiente.

================================================== =======================

Mais informações sobre o bug abaixo:

Se formos para https://developer.android.com/training/articles/security-config.html , veremos que essas linhas de código acima são a configuração de segurança padrão para Android API 24 a API 27. (Android 7.0 a andróide 8.1).
Isso significa que para o Android 9, API 28, que é o que eu estava enfrentando o erro, a configuração padrão mudou.
Mais especificamente, a configuração padrão para Android API 28 é:

    <base-config cleartextTrafficPermitted="false">
        <trust-anchors>
            <certificates src="system" />
        </trust-anchors>
    </base-config>

.
É por isso que usar a configuração padrão para APIs antigas funcionou para mim.

Outra coisa que também funcionou para mim no começo foi definir targetSdkVersion para api 27. Se você não quiser rodar na API 28, isso pode funcionar para você também.

Se você estiver executando um emulador do Android 9, será necessário adicionar, conforme indicado por @delj , android:usesCleartextTraffic="true" em sua tag Application em manifest.xml

Recomendado

você salvou meu tempo. Muito obrigado.

Pessoal eu abri o wifi no emulador e funcionou para mim

o que resolveu meu problema foi usar sudo yarn start em vez de yarn start
Eu tenho um script no meu package.json com

{
...
"scripts":{
"start":"react-native start"
}
....
}

Se você estiver usando um emulador como xCode ou Android Studio, não precisará definir o endereço do servidor dev nas configurações com seu IP. Ele será definido automaticamente. Basta removê-lo e executar novamente o aplicativo. Funciona para mim.

Se você estiver executando um emulador do Android 9, será necessário adicionar, conforme indicado por @delj , android:usesCleartextTraffic="true" em sua tag Application em manifest.xml

Recomendado

Você salvou meu dia

O que eu fiz: (trabalhando no emulador Android Pie 9)

  1. Defina o IP e a porta em Debug server host & port for device clicando em Ctrl+M e Dev Setting no emulador. Certifique-se de definir o host e a porta usando o host e a porta do Bundler (padrão: localhost:8081 ) e certifique-se de que sua porta não esteja bloqueada por outro processo
  2. Execute adb reverse tcp:8081 tcp:8081 no diretório do projeto inicial
  3. Adicione android:usesCleartextTraffic="true" ao nó <application> em AndroidManifest.xml
  4. Depois de realizar três pontos acima, reinicie seu projeto

Posso confirmar que a solução do @rafidamr é a correta. Mas eu estava em um ambiente corporativo onde não podia usar a porta 8081, então mudei o Metro Bundler para uma porta diferente assim:

  • adb reverse tcp:8088 tcp:8088
  • react-native run-android --port 8088

E claro, apontou para a nova porta nas configurações de desenvolvimento do emulador.

Obrigado @camposbrunocampos 👏🏼 , eu estava usando target: Android 9.0 com API level 28 .
Atualizado network_security_config.xml e agora o emulador funciona bem.

Eu tive problemas ao iniciá-lo no ios e no android (tentei no android studio, sem android studio, com xcode e sem xcode). Eu tentei todos os mencionados acima.

Então, o que NÃO ajudou foi:

  • network_security_config.xml
  • adb reverso
  • alterando o endereço IP para o IP do servidor.
  • etc.

A única coisa que eu tinha que fazer era: sudo npm start from react native project directory. Parece um problema de permissão. (usando mac)

@inspiraluna esse é um problema básico de instalação do npm, você deve chown o diretório do seu sistema.

adicione android:usesCleartextTraffic= "true" ao seu aplicativo, no manifesto

....
android:usesCleartextTraffic="true"
android:theme="@style/AppTheme">

Funciona para mim.

Adicionei android:usesCleartextTraffic="true" a AndroidManifest.xml na tag <application ... e reconstruí o aplicativo. Depois disso, ele começou a carregar do servidor dev normalmente.

Isso também corrigiu o problema para mim, mas vou começar dizendo que tentei essa correção inicialmente e não funcionou. Eu tive que começar do zero com novos emuladores, matar e reiniciar o abd várias vezes, reinstalar o android studio, atualizar o gradle, etc.

@ Eyesonly88 Obrigado .. Funciona para mim
Eu adicionei
android:usesCleartextTraffic= "true" para AndroidManifest.xml

Eu destino o Android 4.0 infelizmente e quando executo o adb reverse tcp:8081 tcp:8081 , recebi um erro

warn Failed to connect to development server using "adb reverse": Command failed: adb -s 192.168.66.103:5555 reverse tcp:8081 tcp:8081

Aqui está como consertei o problema de não ter ferramentas de desenvolvedor no emulador:
Esta resposta SO sugere verificar seu arquivo MainApplication.java e remover BuildConfig.Debug do método getUseDeveloperSupport , para que fique assim:

        <strong i="11">@Override</strong>
        public boolean getUseDeveloperSupport() {
            // Return true to load JS from the packager.
            // If BuildConfig.DEBUG is false, assets will be loaded from assets folder.
            return true; // BuildConfig.DEBUG;
        }
Esta página foi útil?
0 / 5 - 0 avaliações