React-native-router-flux: Extremamente lento no Android

O problema é que não tenho android. Talvez a comunidade possa ajudar. Você já tentou depurar? Este componente é apenas um invólucro do exNavigator. O ExNavigator funciona bem no Android?

@timsuchanek , você testou sem recarregar ao vivo e depurar o Chrome? Para mim, é apenas (extremamente) lento quando tenho o recarregamento em tempo real ou a depuração do Chrome;)

Ei, sim, eu tentei sem o depurador habilitado. Mas o que eu encontrei:
Se já foi aberto uma vez, é muito mais rápido.
Apenas nas primeiras 1-2 vezes é lento.
Vou verificar o ExNavigator autônomo

Olá @timsuchanek, obrigado por relatar isso. É lento sem animações (ou seja, <Scheme> sem configuração de animação)? Estou disposto a comprometer o desempenho das animações se o pior acontecer. Eu também não tenho um Android, senão tentaria sozinho.

Posso confirmar que o aplicativo de exemplo ficou lento no Android 4.4 (leva cerca de 2s desde o clique em um botão até qualquer alteração de rota). E os exemplos do exNavigator não têm o mesmo problema.

Editar: depois de ativar a depuração do Chrome, o atraso desaparece magicamente -__________-

@sbycrosz É lento para a barra de guias ou para todas as páginas?

Estive testando esta biblioteca no Android hoje e parece estar funcionando bem, desde que eu não use a depuração do Chrome.

Parece haver um atraso na 'troca' de animações entre as guias. Estou investigando.

Eu testei o 'switch' na guia, é muito lento, cerca de 1.5s para mudar a guia. Desliguei a depuração do cromo e recarreguei ao vivo, é o mesmo.

Você poderia verificar a versão mais recente? Além disso, descomente o registro do console em debug.js e verifique.

Tentei depurar o aplicativo de exemplo da versão 2.3.1 no tablet Android. As animações eram extremamente lentas.
Aqui está a saída do console com debug.js sem comentário
Eu também fiz uma compilação de lançamento de um aplicativo simples (usando a versão 2.3.1) e o executei no Samsung Galaxy S3. Novamente tudo foi muito lento.
Talvez atualizar "@ exponent / react-native-navigator": "^ 0.3.5" para o mais recente consertará isso?

Por favor, verifique o código do navegador principal

Pavel.

24 февр. 2016 г., в 21:18, doomsower [email protected] написал (а):

Tentei depurar o aplicativo de exemplo da versão 2.3.1 no tablet Android. As animações eram extremamente lentas.
Aqui está a saída do console com debug.js sem comentário
Eu também fiz uma compilação de lançamento de um aplicativo simples (usando a versão 2.3.1) e o executei no Samsung Galaxy S3. Novamente tudo foi muito lento.
Talvez atualizar "@ exponent / react-native-navigator": "^ 0.3.5" para o mais recente consertará isso?

-
Responda a este e-mail diretamente ou visualize-o no GitHub.

Oi,

Também estou sentindo lentidão. No entanto, quando a depuração do Chrome está ativada, é mais rápida.
O comportamento no simulador (Android e iOS) e no dispositivo físico é o mesmo de quando a depuração do Chrome está desativada.

Existe alguma maneira de desabilitar "@ exponent / react-native-navigator" completamente para isolar o problema?

Doddy

Oi,

Eu também tive esse problema, mas resolvi desativando o modo dev.

Aqui está o problema no github react-native:
https://github.com/facebook/react-native/issues/3049

Tentei outro roteador e era exatamente o mesmo no android. A demonstração foi
muito devagar. Então, não tenho certeza se se trata de react-native-router-flux :)

Tony

Le ven. 26 de fevereiro 2016 às 03:10, doddys [email protected] a écrit:

Oi,

Também estou sentindo lentidão. No entanto, quando a depuração do Chrome é
habilitado, é mais rápido.
O comportamento no simulador (Android e iOS) e no dispositivo físico é o mesmo
como quando a depuração do Chrome está desabilitada.

Existe alguma maneira de desabilitar "@ exponent / react-native-navigator" completamente
isolar o problema?

Doddy

-
Responda a este e-mail diretamente ou visualize-o no GitHub
https://github.com/aksonov/react-native-router-flux/issues/199#issuecomment -189078772
.

Oi,

Finalmente descobri por que estava lento no meu dispositivo / simulador. Eu fui devido ao meu próprio erro.
Estava fazendo um console.log (ação) nos redutores. Isso torna as coisas muito lentas. Especialmente quando executado no dispositivo. Estava tudo bem quando a depuração do Chrome foi ativada porque ela é executada usando o mecanismo javascript do Chrome, que é muito mais poderoso (laptop vs dispositivo).

Depois de remover todo o log (ação), está muito melhor agora.

Doddy

@doddys funciona para mim 👍

@doddys Estou usando o console.log no meu logger middleware😂😂

Eu vou fechar isso. Para referência futura, certifique-se de não ter console.log em nenhum lugar do código, seja em seu middleware redux ou na depuração para esta biblioteca

Olá.
Estou experimentando isso. Tentei remover todas as chamadas para console.log ao longo do projeto, tentei desligar o modo dev, tentei usar / não-usar depuração de cromo ... até tentei construir um APK de lançamento e executar sua demonstração react-native-router-flux como está ... e o problema ainda persiste.
As transições podem parecer boas por um tempo, mas se você estressar o navegador indo e voltando, o aplicativo irá eventualmente desacelerar e às vezes até travar.
Há um comentário sobre o problema do reagente nativo relacionado https://github.com/facebook/react-native/issues/3049#issuecomment -143505930 que descreve uma solução alternativa.
Nas notas oficiais do React Native sobre o desempenho do Android, esta solução alternativa também é mencionada: https://facebook.github.io/react-native/docs/performance.html#slow -navigator-transitions
Seria possível integrar a solução alternativa InteractionManager em react-native-router-flux de alguma forma?
Até então, eu sinto que realmente não posso usar o módulo em dispositivos Android, o que é uma pena.

Eu estava tentando o exemplo atualizado a partir de hoje com um dispositivo Android real e simulador e estava simplesmente inutilizável.
Tentei atualizar package.json para usar o react-native "react-native": "^0.25.1", mais recente e agora está funcionando bem.

Ao executar em um dispositivo Android real que é
conectado a usb, você precisa executar o seguinte
a partir da linha de comando.

$ react-native start
$ adb reverse tcp:8081 tcp:8081
$ react-native run-android

desligue o "JS Dev Mode

Você deve certificar-se de desligar o "JS Dev Mode", ou então
será executado dolorosamente lento no dispositivo.

Depois de executar "react-native run-android" você deve "agitar" seu dispositivo
para abrir o menu. Selecione “Dev Settings” e desmarque “JS Dev Mode”.

Depois disso, execute "react-native run-android" novamente e deve ser mais
performante, pelo menos espero por você :)

O acima não corrigiu. Meu Nexus 6 roda extremamente lento e não pode ser usado na depuração.
Quem pode dizer como você depura sua versão do Android ...
O problema não é resolvido há muito tempo ...

Para Nexus 5x também não corrigido.

Parece que há uma solicitação de pull do RN (https://github.com/facebook/react-native/pull/10289) que atualiza o NavigationExperimental para descarregar animações do thread JS, o que deve resolver esse problema.

No entanto, react-native-router-flux está usando uma versão bifurcada de NavigationExperimental (react-native-navigation-experimental), que tem alguns arquivos obsoletos (por exemplo, NavigationAnimatedView agora é NavigationTransitioner) então provavelmente vale a pena atualizá-la.

@aksonov é possível desconfigurar o react-native-navigation-experimental? Parece duvidoso manter uma cópia bifurcada dada a frequência das alterações.

no Nexus 5 muito lento com depuração remota ativada

Eu tenho o mesmo problema. Em um emulador, funciona bem. Mas em um dispositivo, as animações são extremamente lentas (roteamento entre telas que são animadas horizontalmente / verticalmente) quando a depuração remota de js está habilitada. que pena, vai ter que ligar e desligar muito.
Wiko Lenny 2

Apenas para informação:

Há alguns dias, descobri que quando executo o "react-native run-android" para instalar no meu dispositivo, sem nenhum motivo aparente, estou demorando cerca de 15/20 minutos para terminar (sim, sou um herói por esperar ) Então, depois de correr e correr dolorosamente, mudando algumas coisas, descobri que meu problema era que estou atrás de um proxy e em comentei minhas configurações de proxy no arquivo gradle.properties. Então, retiro o comentário das configurações e tudo volta a funcionar mais rápido. Realmente não sei por que, mas funciona para mim, e com certeza comento essas configurações de novo e tudo roda devagar de novo. Portanto, se alguém está tendo esse problema e qualquer outra solução funciona, tente colocar essas linhas no arquivo gradle.properties (somente se você estiver atrás de proxy, é claro):

systemProp.http.proxyHost=192.168.X.XX //put your server IP here
systemProp.http.proxyPort=8888 //put your server PORT here
systemProp.http.proxyUser=xxxxxxx //put your PROXY USER here
systemProp.http.proxyPassword=xxxxxxx //put your PROXY USER PASSWORD here

systemProp.https.proxyHost=192.168.X.XX //put your server IP here
systemProp.https.proxyPort=8888 //put your server PORT here
systemProp.https.proxyUser=xxxxxxx //put your PROXY USER here
systemProp.https.proxyPassword=xxxxxxx //put your PROXY USER PASSWORD here

Espero que isso ajude alguém.

Ei pessoal, isso é o que tem mais impacto para mim (além de dev=false e desabilitar a depuração remota de js)

O problema

Transições do roteador + android + react-native-svg

A solução

Obviamente, tente evitar Svg, mas se você tiver que usá-los, retarde a renderização até que a transição seja feita. Você pode usar uma variação desta técnica: https://facebook.github.io/react-native/docs/performance.html#slow -navigator-transitions

No meu caso, as imagens svg são poucas, mas felizmente elas são renderizadas na parte inferior da tela, então o usuário precisa rolar para vê-las. Portanto, apenas atrasar a renderização desses SVGs teve um grande impacto no desempenho (inicialmente era cerca de 4s e depois era cerca de menos de 1s).

Atrasar é bastante complicado em sua própria maneira, então criei um HOC para fazer isso. Aqui está a essência (leve em consideração que escrevi em TS e apenas listrei as informações de tipo para que se tornasse JS, mas não tentei):

import React from 'react'
import { InteractionManager } from 'react-native';

const MAX_DELAY = 500;

export default function providePartialRender(Component) {
  return class PartialRenderProvider extends React.Component {
    // initialize state (same as inside the constructor, just syntax sugar)
    state = {
      partialRender: true,
    };

    componentDidMount() {
      const updatePartialRender = () => {
        this.setState(state => {
          state.partialRender = false
          return state;
        });
      }
      // workaround https://github.com/facebook/react-native/issues/8624
      let called = false;
      const timeout = setTimeout(() => { called = true; updatePartialRender() }, MAX_DELAY);
      InteractionManager.runAfterInteractions(() => {
        if (called) return;
        clearTimeout(timeout);
        updatePartialRender();
      });
    }

    render() {
      const props = Object.assign(
        {},
        this.props,
        { partialRender: this.state.partialRender }
      );

      return <Component {...props}/>
    }
  }
}

Portanto, agora, os componentes que você aprimora com este HOC terão um novo prop chamado partialRender que os dirá se devem renderizar uma versão leve do componente ( partialRender = true ) ou renderizar tudo ( partialRender = false ).

Veja https://reactnavigation.org/ para o novo navegador "oficial" do Facebook, que usa animações nativas para transições.

@Jickelsen Quão oficial é isso?

@adambene verifique a lista de colaboradores.

basta desligar o depurador do Chrome e tudo será rápido :)

@doddys Você é um grande homem! Você sabe?

@doddys Obrigado cara, você salvou o dia!

não resolvido

"react-native-router-flux": "4.0.6",