React-native-router-flux: Extremadamente lento en Android

El problema no tengo android. Quizás la comunidad pueda ayudar. ¿Has intentado depurar? Este componente es simplemente un envoltorio de exNavigator. ¿ExNavigator funciona bien en Android?

@timsuchanek , ¿lo probó sin recarga en vivo y depuración de Chrome? Para mí es solo (extremadamente) lento cuando tengo activada la recarga en vivo o la depuración de Chrome;)

Oye, sí, lo probé sin el depurador habilitado. Pero lo que encontré:
Si ya se ha abierto una vez, es mucho más rápido.
Solo las primeras 1-2 veces es lento.
Verificaré ExNavigator de forma independiente

Hola @timsuchanek, gracias por informar de esto. ¿Es lento sin animaciones (es decir, un <Scheme> sin configuración de animación)? Estoy dispuesto a comprometer el rendimiento de las animaciones si empeora. Tampoco tengo Android, de lo contrario lo probaría yo mismo.

Puedo confirmar que la aplicación de ejemplo se ralentizó en Android 4.4 (se necesitan ~ 2 segundos desde que se hace clic en un botón hasta que se cambia la ruta). Y los ejemplos de exNavigator no tienen el mismo problema.

Editar: Después de habilitar la depuración de Chrome, el retraso desaparece mágicamente -__________-

@sbycrosz ¿Es lento para la barra de pestañas o para todas las páginas?

He estado probando esta biblioteca en Android hoy y parece funcionar bien siempre que no use la depuración de Chrome.

Parece haber un retraso en las animaciones de 'cambio' entre pestañas. Lo estoy investigando.

He probado el 'interruptor' en la pestaña, es demasiado lento, alrededor de 1,5 s para cambiar la pestaña. Apagué la depuración de Chrome y la recarga en vivo, es lo mismo.

¿Podrías comprobar la última versión? También descomente el registro de la consola dentro de debug.js y verifique.

Intenté depurar la aplicación de ejemplo de la versión 2.3.1 en una tableta Android. Las animaciones eran extremadamente lentas.
Aquí está la salida de la consola con debug.js sin comentar
También hice una versión de lanzamiento de una aplicación simple (usando la versión 2.3.1) y la ejecuté en Samsung Galaxy S3. Nuevamente todo fue muy lento.
¿Quizás actualizar "@ exponent / react-native-navigator": "^ 0.3.5" a la última versión lo solucionará?

Verifique el código del exnavigator principal

Pavel.

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

Intenté depurar la aplicación de ejemplo de la versión 2.3.1 en una tableta Android. Las animaciones eran extremadamente lentas.
Aquí está la salida de la consola con debug.js sin comentar
También hice una versión de lanzamiento de una aplicación simple (usando la versión 2.3.1) y la ejecuté en Samsung Galaxy S3. Nuevamente todo fue muy lento.
¿Quizás actualizar "@ exponent / react-native-navigator": "^ 0.3.5" a la última versión lo solucionará?

-
Responda a este correo electrónico directamente o véalo en GitHub.

Hola,

También estoy experimentando lentitud. Sin embargo, cuando la depuración de Chrome está habilitada, es más rápida.
El comportamiento en el simulador (Android e iOS) y el dispositivo físico es el mismo que cuando la depuración de Chrome está deshabilitada.

¿Hay alguna forma de deshabilitar "@ exponent / react-native-navigator" por completo para aislar el problema?

Doddy

Hola,

También tuve este problema, pero lo resolví desactivando el modo dev.

Aquí el problema en react-native github:
https://github.com/facebook/react-native/issues/3049

Probé con otro enrutador y fue exactamente lo mismo en Android. La demostración fue
muy lento. Entonces, no estoy seguro de que se trate de react-native-router-flux :)

Tony

Le ven. 26 févr. 2016 à 03:10, doddys [email protected] a écrit:

Hola,

También estoy experimentando lentitud. Sin embargo, cuando la depuración de Chrome es
habilitado, es más rápido.
El comportamiento en el simulador (Android e iOS) y el dispositivo físico es el mismo
como cuando la depuración de Chrome está deshabilitada.

¿Hay alguna forma de deshabilitar "@ exponent / react-native-navigator" por completo?
para aislar el problema?

Doddy

-
Responda a este correo electrónico directamente o véalo en GitHub
https://github.com/aksonov/react-native-router-flux/issues/199#issuecomment -189078772
.

Hola,

Finalmente encontré por qué era lento en mi dispositivo / simulador. Fue por mi propio error.
Estaba haciendo un console.log (acción) en los reductores. Eso resulta mucho en cosas lentas. Especialmente cuando se ejecuta en el dispositivo. Estaba bien cuando se activó la depuración de Chrome porque se ejecuta utilizando el motor JavaScript de Chrome, que es mucho más potente (computadora portátil frente a dispositivo).

Después de eliminar todo el registro (acción), ahora es mucho mejor.

Doddy

@doddys funciona para mí 👍

@doddys Estoy usando console.log en mi middleware de registrador😂😂

Voy a cerrar esto. Para referencia futura, asegúrese de no tener console.log en ninguna parte del código, ya sea en su middleware redux o en la depuración de esta biblioteca.

Hola.
Estoy experimentando esto. Intenté eliminar todas las llamadas a console.log durante todo el proyecto, intenté desactivar el modo de desarrollo, intenté usar / no usar la depuración de Chrome ... incluso intenté crear un APK de lanzamiento y ejecutar la demostración de react-native-router-flux como está ... y el problema aún persiste.
Las transiciones pueden verse bien por un tiempo, pero si estresa al navegador yendo hacia atrás y hacia adelante, la aplicación eventualmente se ralentizará y, a veces, incluso se congelará.
Hay un comentario sobre el problema relacionado con react-native https://github.com/facebook/react-native/issues/3049#issuecomment -143505930 que describe una solución.
En las notas oficiales de React Native sobre el rendimiento de Android, también se menciona esta solución: https://facebook.github.io/react-native/docs/performance.html#slow -navigator-transitions
¿Sería posible integrar la solución alternativa de InteractionManager en react-native-router-flux de alguna manera?
Hasta entonces, siento que realmente no puedo usar el módulo en dispositivos Android, lo cual es una verdadera lástima.

Estaba probando el ejemplo actualizado a partir de hoy con un dispositivo y un simulador de Android real y simplemente no se podía usar.
Intenté actualizar package.json para usar el último react-native "react-native": "^0.25.1", y ahora funciona bastante bien.

Cuando se ejecuta en un dispositivo Android real que es
conectado a usb, debe ejecutar lo siguiente
desde la línea de comando.

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

desactivar "JS Dev Mode

Deberá asegurarse de desactivar "JS Dev Mode", o de lo contrario
funcionará muy lento en el dispositivo.

Después de ejecutar "react-native run-android", debe "agitar" su dispositivo
para abrir el menú. Seleccione "Configuración de desarrollo" y luego desmarque "Modo de desarrollo JS".

Después de eso, ejecute "react-native run-android" nuevamente y debería ser más
performante, al menos espero para ti :)

Lo anterior no se solucionó. Mi Nexus 6 funciona muy lento y no se puede utilizar en la depuración.
¿Quién puede decir cómo depuras tu versión de Android ...
El problema no se soluciona durante mucho tiempo ...

Para nexus 5x no se corrigió también.

Parece que hay una solicitud de extracción de RN (https://github.com/facebook/react-native/pull/10289) que actualiza NavigationExperimental para descargar animaciones del hilo JS, lo que debería resolver este problema.

Sin embargo, react-native-router-flux está usando una versión bifurcada de NavigationExperimental (react-native-navigation-experimental), que tiene algunos archivos obsoletos (por ejemplo, NavigationAnimatedView ahora es NavigationTransitioner) por lo que probablemente valga la pena actualizarlo.

@aksonov ¿ es posible deshacer react-native-navigation-experimental? Parece dudoso mantener una copia bifurcada dada la frecuencia de los cambios.

en nexus 5 muy lento con depuración remota activada

Tengo el mismo problema. En un emulador funciona bien. Pero en un dispositivo, las animaciones son extremadamente lentas (enrutamiento entre pantallas que se animan horizontal / verticalmente) cuando la depuración remota de js está habilitada. Lástima, tendrá que encenderlo y apagarlo mucho.
Wiko Lenny 2

Solo para información:

Hace unos días, me imagino que cuando ejecuto "react-native run-android" para instalarlo en mi dispositivo, sin ninguna razón aparente, me toma alrededor de 15/20 minutos terminar (sí, soy un héroe por esperar ). Entonces, después de ejecutar y ejecutar dolorosamente, cambiando algunas cosas, me doy cuenta de que mi problema era que estaba detrás de un proxy y he comentado mis configuraciones de proxy en el archivo gradle.properties. Así que elimino los comentarios de las configuraciones y todo vuelve a funcionar más rápido. Realmente no sé por qué, pero funciona para mí, y para estar seguro vuelvo a comentar esta configuración y todo vuelve a funcionar lentamente. Entonces, si alguien tiene este problema y cualquier otra solución funciona, intente poner estas líneas en su archivo gradle.properties (solo si está detrás del proxy, por supuesto):

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 esto ayude a alguien.

Hola chicos, esto es lo que más me ha impactado (aparte de dev=false y deshabilitar la depuración remota de js)

El problema

Transiciones de enrutador + android + react-native-svg

La solución

Obviamente, intente evitar Svg, pero si tiene que usarlos, retrase la renderización hasta que se realice la transición. Puede utilizar una variación de esta técnica: https://facebook.github.io/react-native/docs/performance.html#slow -navigator-transitions

En mi caso, las imágenes svg son bastantes, pero afortunadamente están renderizadas en la parte inferior de la pantalla, por lo que el usuario necesita desplazarse para poder verlas. Entonces, solo retrasar la renderización de esos svgs tuvo un gran impacto en el rendimiento (inicialmente fue de aproximadamente 4 segundos y luego fue de menos de 1 segundo).

Retrasar es bastante complicado a su manera, así que creé un HOC para hacerlo. Aquí está la esencia (tenga en cuenta que escribí en TS y simplemente dividí la información de tipo para que se convierta en JS pero no lo he probado):

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

Así que ahora, los componentes que mejore con este HOC tendrán un nuevo accesorio llamado partialRender que les dirá si renderizar una versión ligera del componente ( partialRender = true ) o renderizar todo ( partialRender = false ).

Consulte https://reactnavigation.org/ para conocer el nuevo navegador "oficial" de Facebook, que utiliza animaciones nativas para las transiciones.

@Jickelsen ¿

@adambene consultar lista de colaboradores.

simplemente apague su depurador de Chrome y todo será rápido :)

@doddys ¡ Eres un gran hombre! ¿Tú lo sabes?

@doddys ¡ Gracias tío, salvaste el día!

no resuelto

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