React-native-router-flux: Extrêmement lent sur Android

Le problème, je n'ai pas Android. Peut-être que la communauté pourrait aider. As-tu essayé de déboguer ? Ce composant est juste un wrapper autour d'exNavigator. ExNavigator fonctionne-t-il bien sur Android ?

@timsuchanek , l'avez-vous testé sans rechargement en direct ni débogage de chrome ? Pour moi, ce n'est (extrêmement) lent que lorsque j'ai un rechargement en direct ou un débogage de chrome ;)

Hé, oui je l'ai essayé sans débogueur activé. Mais ce que j'ai trouvé :
S'il a déjà été ouvert une fois, c'est beaucoup plus rapide.
Seulement les 1-2 premières fois, c'est lent.
Je vais vérifier ExNavigator autonome

Salut @timsuchanek merci d'avoir signalé cela. Est-ce lent sans animations (c'est-à-dire un <Scheme> sans configuration d'animation) ? Je suis prêt à compromettre les animations pour les performances si le pire devait empirer. Je n'ai pas d'Android non plus, sinon je l'essayerais moi-même.

Je peux confirmer que l'exemple d'application a ralenti sur Android 4.4 (il faut environ 2 secondes pour cliquer sur un bouton et modifier l'itinéraire). Et les exemples exNavigator n'ont pas le même problème.

Edit: Après avoir activé le débogage de chrome, le délai disparaît comme par magie -__________-

@sbycrosz Est-ce lent pour la barre d'onglets ou pour toutes les pages ?

J'ai testé cette bibliothèque sur Android aujourd'hui et elle semble fonctionner correctement tant que je n'utilise pas le débogage Chrome.

Il semble y avoir un retard dans les animations de « commutation » entre les onglets. Je suis en train de l'étudier.

J'ai testé le 'switch' sur l'onglet, c'est trop lent, environ 1,5 s pour changer d'onglet. J'ai désactivé le débogage de chrome et le rechargement en direct, c'est la même chose.

Pourriez-vous vérifier la dernière version ? Veuillez également décommenter la journalisation de la console dans debug.js et vérifier.

J'ai essayé de déboguer l'exemple d'application à partir de la version 2.3.1 sur une tablette Android. Les animations étaient extrêmement lentes.
Voici la sortie de la console avec debug.js non commenté
J'ai également créé une version de l'application simple (à l'aide de la version 2.3.1) et l'ai exécutée sur le Samsung Galaxy S3. Encore une fois, tout était très lent.
Peut-être que la mise à jour de "@exponent/react-native-navigator": "^0.3.5" au plus tard résoudra le problème ?

Veuillez vérifier le code de l'exnavigateur principal

Pavel.

24 août. 2016 ., в 21:18, doomsower [email protected] написал(а):

J'ai essayé de déboguer l'exemple d'application à partir de la version 2.3.1 sur une tablette Android. Les animations étaient extrêmement lentes.
Voici la sortie de la console avec debug.js non commenté
J'ai également créé une version de l'application simple (à l'aide de la version 2.3.1) et l'ai exécutée sur le Samsung Galaxy S3. Encore une fois, tout était très lent.
Peut-être que la mise à jour de "@exponent/react-native-navigator": "^0.3.5" au plus tard résoudra le problème ?

-
Répondez directement à cet e-mail ou consultez-le sur GitHub.

Salut,

J'éprouve aussi de la lenteur. Cependant, lorsque le débogage Chrome est activé, il est plus rapide.
Le comportement dans le simulateur (Android et iOS) et l'appareil physique est le même que lorsque le débogage Chrome est désactivé.

Existe-t-il de toute façon une désactivation complète de "@exponent/react-native-navigator" pour isoler le problème ?

Doddy

Salut,

J'ai eu ce problème aussi, mais je l'ai résolu en désactivant le mode dev.

Voici le problème sur github react-native :
https://github.com/facebook/react-native/issues/3049

J'ai essayé un autre routeur et c'était exactement la même chose sur Android. La démo était
très lent. Donc, je ne suis pas sûr qu'il s'agisse de react-native-router-flux :)

Tony

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

Salut,

J'éprouve aussi de la lenteur. Cependant, lorsque le débogage de chrome est
activé, c'est plus rapide.
Le comportement dans le simulateur (Android et iOS) et l'appareil physique est le même
comme lorsque le débogage de chrome est désactivé.

Y a-t-il de toute façon pour désactiver complètement "@exponent/react-native-navigator"
pour isoler le problème ?

Doddy

-
Répondez directement à cet e-mail ou consultez-le sur GitHub
https://github.com/aksonov/react-native-router-flux/issues/199#issuecomment -189078772
.

Salut,

J'ai finalement trouvé pourquoi c'était lent sur mon appareil/simulateur. J'étais à cause de ma propre erreur.
Je faisais une console.log(action) dans les réducteurs. Cela s'avère très lent. Surtout lorsqu'il est exécuté sur l'appareil. Tout s'est bien passé lorsque le débogage de chrome a été activé car il est exécuté à l'aide du moteur javascript de chrome qui est beaucoup plus puissant (ordinateur portable vs appareil).

Après avoir supprimé tout le journal (action), c'est beaucoup mieux maintenant.

Doddy

@doddys travaille pour moi

@doddys J'utilise console.log dans mon middleware logger😂😂

Je vais fermer ça. Pour référence future, assurez-vous de ne pas avoir console.log n'importe où dans le code, que ce soit votre middleware redux ou dans le débogage de cette bibliothèque

Bonjour.
Je vis cela. J'ai essayé de supprimer tous les appels à console.log tout au long du projet, j'ai essayé de désactiver le mode dev, j'ai essayé d'utiliser/ne pas utiliser le débogage chrome... ... et le problème persiste.
Les transitions peuvent sembler correctes pendant un certain temps, mais si vous stressez le navigateur en allant en avant et en arrière, l'application finira par ralentir et parfois même se bloquera.
Il y a un commentaire sur le problème réact-native connexe https://github.com/facebook/react-native/issues/3049#issuecomment -143505930 qui décrit une solution de contournement.
Dans les notes officielles de React Native sur les performances d'Android, cette solution de contournement est également mentionnée : https://facebook.github.io/react-native/docs/performance.html#slow -navigator-transitions
Serait-il possible d'intégrer la solution de contournement InteractionManager sur react-native-router-flux d'une manière ou d'une autre?
Jusque-là, je sens que je ne peux pas vraiment utiliser le module sur les appareils Android, ce qui est vraiment dommage.

J'essayais l'exemple mis à jour à partir d'aujourd'hui avec à la fois un vrai appareil Android et un simulateur et il était tout simplement inutilisable.
J'ai essayé de mettre à jour package.json afin d'utiliser la dernière version de react-native "react-native": "^0.25.1", et maintenant tout fonctionne assez bien.

Lors de l'exécution sur un appareil Android réel qui est
branché sur usb, vous devez exécuter ce qui suit
à partir de la ligne de commande.

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

désactiver "JS Dev Mode

Vous voudrez vous assurer que vous désactivez le "JS Dev Mode", sinon il
fonctionnera douloureusement lentement sur l'appareil.

Après avoir exécuté "react-native run-android", vous devez "secouer" votre appareil
pour faire apparaître le menu. Sélectionnez « Paramètres de développement », puis décochez « Mode de développement JS ».

Après cela, exécutez à nouveau "react-native run-android" et cela devrait être plus
performant, du moins je l'espère pour vous :)

Ce qui précède n'a pas résolu. Mon Nexus 6 fonctionne extrêmement lentement ne peut pas être utilisé en débogage.
Qui peut dire comment vous déboguez votre version Android...
Le problème n'est pas résolu depuis longtemps...

Pour le nexus 5x pas fixé non plus.

Il semble qu'il y ait une pull request de RN (https://github.com/facebook/react-native/pull/10289) qui met à jour NavigationExperimental pour décharger les animations du thread JS, ce qui devrait résoudre ce problème.

Cependant, react-native-router-flux utilise une version fourchue de NavigationExperimental (react-native-navigation-experimental), qui contient des fichiers obsolètes (par exemple, NavigationAnimatedView est maintenant NavigationTransitioner), il vaut donc probablement la peine de la mettre à jour.

@aksonov est-il possible de débrancher react-native-navigation-experimental? Il semble douteux de conserver une copie fourchue étant donné la fréquence des changements.

sur le Nexus 5 très lent avec le débogage à distance activé

J'ai le même problème. Sur un émulateur ça marche bien. Mais sur un appareil, les animations sont extrêmement lentes (routage entre les écrans qui s'animent horizontalement/verticalement) lorsque le débogage js à distance est activé. dommage, il faudra beaucoup l'allumer et l'éteindre.
Wiko Lenny 2

Juste pour informations:

Il y a quelques jours, je suppose que lorsque je lance "react-native run-android" pour l'installer sur mon appareil, sans raison apparente, cela prend environ 15/20 minutes pour terminer (oui, je suis un héros pour attendre ). Donc, après avoir exécuté et exécuté péniblement, en modifiant quelque chose, je me suis rendu compte que mon problème était que je suis derrière un proxy et que j'ai commenté mes configurations de proxy sur le fichier gradle.properties. Je décommente donc les configurations et tout s'exécute à nouveau plus rapidement. Je ne sais vraiment pas pourquoi, mais cela fonctionne pour moi, et pour être sûr, je commente à nouveau ces configurations et tout fonctionne à nouveau lentement. Donc, si quelqu'un rencontre ce problème et que d'autres solutions fonctionnent, essayez de mettre ces lignes dans le fichier yout gradle.properties (uniquement si vous êtes derrière un proxy, bien sûr):

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

J'espère que cela aidera quelqu'un.

Hé les gars, c'est ce qui a le plus d'impact pour moi (à part dev=false et la désactivation du débogage js à distance)

Le problème

Transitions de routeur + Android + react-native-svg

La solution

Essayez évidemment d'éviter Svg, mais si vous devez les utiliser, retardez leur rendu jusqu'à ce que la transition soit effectuée. Vous pouvez utiliser une variante de cette technique : https://facebook.github.io/react-native/docs/performance.html#slow -navigator-transitions

Dans mon cas, les images svg sont assez nombreuses, mais heureusement, elles sont affichées en bas de l'écran, l'utilisateur doit donc faire défiler pour les voir. Ainsi, seul le fait de retarder le rendu de ces svgs a eu un impact énorme sur les performances (au départ, c'était environ 4 s et après, c'était environ moins de 1 s).

Retarder est assez délicat à sa manière, j'ai donc créé un HOC pour le faire. Voici l'essentiel (prenez en compte que j'ai écrit dans TS et que j'ai juste rayé les informations de type pour qu'elles deviennent JS mais je ne l'ai pas essayé):

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

Alors maintenant, les composants que vous améliorez avec ce HOC auront un nouvel accessoire appelé partialRender qui leur indiquera s'il faut rendre une version allégée du composant ( partialRender = true ) ou tout rendre ( partialRender = false ).

Voir https://reactnavigation.org/ pour le nouveau navigateur "officiel" de Facebook, qui utilise des animations natives pour les transitions.

@Jickelsen À quel point est-ce officiel ?

@adambene vérifie la liste des collaborateurs.

éteignez simplement votre Chrome Debugger et tout serait rapide :)

@doddys Tu es un homme formidable ! Tu le sais?

@doddys Merci mec, tu as sauvé la journée !

pas résolu

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