React-native-router-flux: Extrem langsam auf Android

Das Problem habe ich kein Android. Vielleicht könnte die Community helfen. Hast du versucht zu debuggen? Diese Komponente ist nur ein Wrapper um exNavigator. Funktioniert ExNavigator gut auf Android?

@timsuchanek , hast du es ohne Live-Neuladen und Chrome-Debugging getestet? Bei mir ist es nur (extrem) langsam, wenn ich Live-Nachladen oder Chrome-Debugging eingeschaltet habe ;)

Hey, ja, ich habe es ohne aktivierten Debugger versucht. Aber was ich gefunden habe:
Wenn es schon einmal geöffnet wurde, geht es viel schneller.
Nur die ersten 1-2 Mal ist es langsam.
Ich werde ExNavigator Standalone überprüfen

Hey @timsuchanek danke für die Meldung. Ist es ohne Animationen langsam (dh ein <Scheme> ohne Animationskonfiguration)? Ich bin bereit, Animationen für die Leistung zu beeinträchtigen, wenn es schlimmer wird. Ich habe auch kein Android, sonst würde ich es selbst versuchen.

Ich kann bestätigen, dass die Beispiel-App unter Android 4.4 verlangsamt wurde (es dauert etwa 2 Sekunden vom Klicken auf eine Schaltfläche bis zu Routenänderungen). Und die exNavigator-Beispiele haben nicht das gleiche Problem.

Bearbeiten: Nach dem Aktivieren des Chrome-Debuggings verschwindet die Verzögerung auf magische Weise -__________-

@sbycrosz Ist es langsam für die Tab-Leiste oder für alle Seiten?

Ich habe diese Bibliothek heute auf Android getestet und sie scheint gut zu funktionieren, solange ich das Chrome-Debugging nicht verwende.

Es scheint eine Verzögerung beim Umschalten von Animationen zwischen Registerkarten zu geben. Ich untersuche es.

Ich habe den "Schalter" auf der Registerkarte getestet, er ist zu langsam, etwa 1,5 Sekunden, um die Registerkarte zu wechseln. Ich habe das Chrome-Debugging deaktiviert und das Live-Neuladen aktiviert, es ist das gleiche.

Könnten Sie die neueste Version überprüfen? Bitte entkommentieren Sie auch die Konsolenprotokollierung in debug.js und überprüfen Sie.

Ich habe versucht, die Beispiel-App aus Version 2.3.1 auf einem Android-Tablet zu debuggen. Animationen waren extrem langsam.
Hier ist die Konsolenausgabe mit debug.js unkommentiert
Ich habe auch einen Release-Build einer einfachen App (mit Version 2.3.1) erstellt und auf dem Samsung Galaxy S3 ausgeführt. Wieder war alles sehr langsam.
Vielleicht wird es durch das Aktualisieren von "@exponent/react-native-navigator": "^0.3.5" auf den neuesten Stand behoben?

Bitte überprüfen Sie den Kernexnavigator-Code

Pawel.

24. Februar 2016 г., в 21:18, Doomsower [email protected] написал(а):

Ich habe versucht, die Beispiel-App aus Version 2.3.1 auf einem Android-Tablet zu debuggen. Animationen waren extrem langsam.
Hier ist die Konsolenausgabe mit debug.js unkommentiert
Ich habe auch einen Release-Build einer einfachen App (mit Version 2.3.1) erstellt und auf dem Samsung Galaxy S3 ausgeführt. Wieder war alles sehr langsam.
Vielleicht wird es durch das Aktualisieren von "@exponent/react-native-navigator": "^0.3.5" auf den neuesten Stand behoben?

—
Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf GitHub an.

Hi,

Ich erlebe auch Langsamkeit. Wenn Chrome-Debugging jedoch aktiviert ist, ist es schneller.
Das Verhalten im Simulator (Android und iOS) und auf dem physischen Gerät ist dasselbe wie bei deaktiviertem Chrome-Debugging.

Gibt es trotzdem "@exponent/react-native-navigator" komplett zu deaktivieren um das Problem einzugrenzen?

Doddy

Hi,

Ich hatte dieses Problem auch, aber ich habe es gelöst, indem ich den Dev-Modus deaktiviert habe.

Hier das Problem zu reaktivem Github:
https://github.com/facebook/react-native/issues/3049

Ich habe einen anderen Router ausprobiert und es war genau das gleiche auf Android. Die Demo war
sehr langsam. Also, ich bin mir nicht sicher, ob es um React-Native-Router-Flux geht :)

Tony

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

Hi,

Ich erlebe auch Langsamkeit. Wenn jedoch Chrome-Debugging
aktiviert, ist es schneller.
Das Verhalten im Simulator (Android und iOS) und auf dem physischen Gerät ist gleich
wenn Chrome-Debugging deaktiviert ist.

Gibt es sowieso "@exponent/react-native-navigator" komplett zu deaktivieren
um das Problem zu isolieren?

Doddy

—
Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf GitHub an
https://github.com/aksonov/react-native-router-flux/issues/199#issuecomment -189078772
.

Hi,

Ich habe endlich herausgefunden, warum es auf meinem Gerät / Simulator langsam war. Ich war auf meinen eigenen Fehler zurückzuführen.
Ich habe eine console.log(action) in den Reducern gemacht. Das stellt sich oft als langsam heraus. Vor allem, wenn es auf dem Gerät ausgeführt wird. Es war in Ordnung, wenn das Chrome-Debugging aktiviert war, da es mit der viel leistungsfähigeren Chrome-Javascript-Engine ausgeführt wird (Laptop vs. Gerät).

Nachdem Sie alle Protokolle (Aktionen) entfernt haben, ist es jetzt viel besser.

Doddy

@daddys funktioniert für mich 👍

@daddys Ich verwende console.log in meiner Logger-Middleware😂😂

Ich werde das schließen. Stellen Sie für zukünftige Referenzen sicher, dass sich console.log nirgendwo im Code befindet, egal ob es sich um Ihre Redux-Middleware oder im Debug für diese Bibliothek handelt

Hallo.
Ich erlebe dies. Ich habe versucht, alle Aufrufe von console.log während des gesamten Projekts zu entfernen, den Dev-Modus auszuschalten, Chrome-Debug zu verwenden / nicht zu verwenden ... ...und das Problem besteht weiterhin.
Übergänge können für eine Weile in Ordnung aussehen, aber wenn Sie den Navigator durch Vor- und Zurückgehen stressen, wird die App irgendwann langsamer und friert manchmal sogar ein.
Es gibt einen Kommentar zum zugehörigen React-Native-Problem https://github.com/facebook/react-native/issues/3049#issuecomment -143505930, der eine Problemumgehung beschreibt.
In den offiziellen Hinweisen von React Native zur Android-Leistung wird dieser Workaround auch erwähnt: https://facebook.github.io/react-native/docs/performance.html#slow -navigator-transitions
Wäre es möglich, den InteractionManager-Workaround auf React-Native-Router-Flux irgendwie zu integrieren?
Bis dahin habe ich das Gefühl, dass ich das Modul auf Android-Geräten nicht wirklich nutzen kann, was sehr schade ist.

Ich habe das heute aktualisierte Beispiel sowohl mit einem echten Android-Gerät als auch mit einem Simulator ausprobiert und es war einfach unbrauchbar.
Ich habe versucht, package.json zu aktualisieren, um die neuesten react-native "react-native": "^0.25.1", und jetzt läuft es ziemlich reibungslos.

Bei der Ausführung auf einem tatsächlichen Android-Gerät ist das
an USB angeschlossen müssen Sie Folgendes ausführen
von der Befehlszeile.

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

Deaktivieren Sie den "JS-Entwicklermodus"

Sie sollten sicherstellen, dass Sie den "JS Dev Mode" deaktivieren, sonst ist es
wird auf dem Gerät schmerzhaft langsam ausgeführt.

Nachdem Sie "react-native run-android" ausgeführt haben, sollten Sie Ihr Gerät "schütteln"
um das Menü aufzurufen. Wählen Sie „Entwicklungseinstellungen“ und deaktivieren Sie dann „JS-Entwicklermodus“.

Danach "react-native run-android" erneut ausführen und es sollte mehr sein
performant, zumindest hoffe ich für dich :)

Das obige wurde nicht behoben. Mein Nexus 6 läuft extrem langsam, kann nicht im Debug verwendet werden.
Wer kann sagen, wie Sie Ihre Android-Version debuggen...
Das Problem ist schon lange nicht mehr behoben...

Für Nexus 5x auch nicht behoben.

Es sieht so aus, als ob es eine Pull-Anfrage von RN (https://github.com/facebook/react-native/pull/10289) gibt, die NavigationExperimental aktualisiert, um Animationen aus dem JS-Thread zu entladen, was dieses Problem beheben sollte.

React-native-router-flux verwendet jedoch eine abgespaltene Version von NavigationExperimental (react-native-navigation-experimental), die einige veraltete Dateien enthält (zB NavigationAnimatedView ist jetzt NavigationTransitioner), daher lohnt es sich wahrscheinlich, diese zu aktualisieren.

@aksonov ist es möglich, Reactive-Native-Navigation-Experimental aufzulösen? Angesichts der Häufigkeit von Änderungen erscheint es fragwürdig, eine gespaltene Kopie zu pflegen.

auf Nexus 5 sehr langsam, wenn Remote-Debugging aktiviert ist

Ich habe das gleiche Problem. Auf einem Emulator funktioniert es einwandfrei. Auf einem Gerät sind die Animationen jedoch extrem verzögert (Routing zwischen horizontal/vertikal animierenden Bildschirmen), wenn das Remote-Js-Debugging aktiviert ist. Schade, werde es oft ein- und ausschalten müssen.
Wiko Lenny 2

Nur zur Information:

Vor ein paar Tagen bin ich der Meinung, dass wenn ich "react-native run-android" ausführe, um es ohne ersichtlichen Grund auf meinem Gerät zu installieren, es ungefähr 15/20 Minuten dauert, bis es fertig ist (ja, ich bin ein Held fürs Warten ). Nachdem ich mühsam ausgeführt und ausgeführt und etwas geändert habe, finde ich heraus, dass mein Problem darin bestand, dass ich mich hinter einem Proxy befinde und meine Proxy-Konfigurationen in der Datei gradle.properties kommentiert habe. Also entkommentiere ich die Konfigurationen und alles läuft wieder schneller. Ich weiß wirklich nicht warum, aber funktioniert bei mir, und sicherheitshalber kommentiere ich diese Konfigurationen noch einmal und alles läuft wieder langsam. Wenn also jemand dieses Problem hat und andere Lösungen funktionieren, versuchen Sie, diese Zeilen in Ihre Datei gradle.properties einzufügen (natürlich nur, wenn Sie sich hinter dem Proxy befinden):

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

Ich hoffe das hilft jemandem.

Hey Leute, das hat für mich die meisten Auswirkungen (abgesehen von dev=false und dem Deaktivieren des Remote-Js-Debuggings)

Das Problem

Router-Übergänge + Android + react-native-svg

Die Lösung

Versuchen Sie natürlich, Svg zu vermeiden, aber wenn Sie sie verwenden müssen, verzögern Sie das Rendern, bis der Übergang erfolgt ist. Sie können eine Variation dieser Technik verwenden: https://facebook.github.io/react-native/docs/performance.html#slow -navigator-transitions

In meinem Fall sind die SVG-Bilder ziemlich viele, aber zum Glück werden sie am unteren Bildschirmrand gerendert, sodass der Benutzer scrollen muss, um sie zu sehen. Daher hatte nur das Verzögern des Renderns dieser SVGs einen großen Einfluss auf die Leistung (anfänglich waren es etwa 4 Sekunden und danach etwa weniger als 1 Sekunde).

Das Delaying ist auf seine Art ziemlich knifflig, also habe ich einen HOC erstellt, um es zu tun. Hier ist das Wesentliche (berücksichtigen Sie, dass ich in TS geschrieben und nur die Typinformationen gestreift habe, damit es zu JS wird, aber ich habe es nicht ausprobiert):

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

Jetzt haben die Komponenten, die Sie mit diesem HOC verbessern, eine neue Stütze namens partialRender , die ihnen sagt, ob sie eine leichte Version der Komponente rendern ( partialRender = true ) oder alles rendern sollen ( partialRender = false ).

Siehe https://reactnavigation.org/ für den neuen "offiziellen" Navigator von Facebook, der native Animationen für Übergänge verwendet.

@Jickelsen Wie offiziell ist es?

@adambene Liste der Mitarbeiter überprüfen.

Schalten Sie einfach Ihren Chrome-Debugger aus und alles wäre schnell :)

@daddys Du bist ein toller Mann! Du weißt es?

@daddys Danke Mann, du hast den Tag gerettet!

Nicht gelöst

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