Gedanken nach der Behebung eines zufällig wiederkehrenden Tastaturproblems (ReactNative)

Dieser Artikel teilt Ihnen einen Gedanken mit, nachdem ein zufällig wiederkehrendes Tastaturproblem behoben wurde. Es ist sehr sinnvoll, dass Freunde, die interessiert sind, einen Blick darauf werfen

Es hat vor kurzem fast eine Woche gedauert. Ich habe einen Fehler auf dem mobilen Endgerät gefunden. Es ist ein sehr interessanter Fehler, so etwas wie dieser. Dies ist eine relativ lange Geschichte. Wenn Sie interessiert sind, können Sie weiterlesen.

Um was für einen Fehler handelt es sich?

Der Fehler tritt auf, nachdem eine Tablet-Anwendung längere Zeit verwendet wurde. Klicken Sie zunächst auf „Fertig/Suchen“, nachdem Sie einige Inhalte in das Eingabefeld eingegeben haben. Klicken Sie anschließend auf einige leere Bereiche. und der Cursorfokus liegt auf Das zuletzt eingegebene Eingabefeld. Zu diesem Zeitpunkt wird die Reaktion der Anwendung auf das Benutzerverhalten die Benutzer verwirren und verwirren.

Zusammenfassend weist es folgende Eigenschaften auf

Die Anwendung ist am Anfang normal, kann aber nicht jedes Mal reproduziert werden
Sobald dieser Fehler auf jeder Seite mit einem Eingabefeld auftritt, ist das wiederkehrende Szenario unbekannt. Es ist derzeit bekannt, dass es umso wahrscheinlicher ist, dass er auftritt. Sobald die Anwendung im Hintergrund geschlossen wird, wird die Krankheit neu gestartet und verschwindet wieder.
So beheben Sie diesen Fehler

• Der erste Schritt besteht darin, zu versuchen, ihn wieder zu stabilisieren

Wir haben zunächst versucht, eine minimale User Journey zur Reproduktion zu finden Bei diesem Fehler hatte ich damals relativ viel Glück und brauchte etwa einen halben Tag, um den kleinsten Weg zum Wiederauftauchen zu finden.

Ohne auf den geschäftlichen Hintergrund einzugehen, stellen wir kurz die Seitenlogik der Anwendung vor.

Nach dem Anmelden verfügt unsere Anwendung über eine Startseite. Auf der Startseite gibt es drei Registerkarten, die zum Wechseln verschoben oder angeklickt werden können. Auf der Registerkartenseite gibt es auch einige Funktionsmenüs, auf die geklickt werden kann um zu einer anderen neuen Seite zu springen.

Die Seite sieht ungefähr wie folgt aus. Wenn Sie kein professioneller UX sind, wundern Sie sich bitte nicht, wenn sie hässlich ist.

Ein Pfad, den wir gefunden haben und der schnell reproduziert werden kann, ist
Nachdem Sie sich auf der Startseite angemeldet haben, wechseln Sie drei Mal wiederholt Tab mehrmals (mehr als 20 Mal)

Klicken Sie auf MenüA, um zu einer Seite mit einem Eingabefeld zu gelangen
Geben Sie Daten in die Eingabe ein Feld und klicken Sie auf „Fertig“ der Soft-Tastatur
Klicken Sie auf den leeren Bereich der Seite
und die Soft-Tastatur wird angezeigt.

• Der zweite Schritt besteht darin, aus dem Codeteil herauszufinden, warum das Problem im Minimalszenario auftritt

Nachdem wir einen minimalen Reproduktionspfad gefunden haben, können wir aus dem Code herausfinden, warum das Problem auftritt auftritt.

Da dieser Fehler nach einem Neustart der Anwendung nicht verschwindet, richtet sich unser Verdacht auf das Renderproblem, das höchstwahrscheinlich durch die Komponente verursacht wird.

Es gibt ein paar Vermutungen unter uns

Es gibt ein Problem mit der von uns gekapselten Eingabekomponente

Es gibt ein Problem mit Die Schiebekomponente der drei Registerkarten, die Schiebeansicht in der Komponente, wirkt sich auf das Gestenreaktionssystem von RN aus.
Schließlich scheint es, dass dies nicht der Fall ist mit einer anderen Kollegin in der Gruppe und sie stellte fest, dass es leicht zu Problemen kommen kann, wenn es viele Anfragen gibt. Es wurde auch vermutet, dass das Problem durch die Verarbeitung von Netzwerkanfragen verursacht wird. Dieser Verdacht ist eigentlich nicht ganz richtig, aber er findet für uns einen Weg.

• Wir haben schließlich festgestellt, dass alle unsere Netzwerkanfragen eine Maskenebene und ein Ladeaufforderungssymbol ähnlich dem Spinner im Web (ActivityIndicator in RN) auf der Seite haben, bevor das Anfrageergebnis zurückgegeben wird. Dieser Teil wird beeinflusst Seitenrendering.

  Wenn dieser Teil entfernt wird (die Maske wird nicht angezeigt, bevor die Anfrage eintrifft), verschwindet der Fehler. Diese Entdeckung war damals noch schockierend und verwirrend, da es den Anschein hat, dass ein Teil der Ursache gefunden wurde, wir aber immer noch Ich habe es nicht herausgefunden.

Der dritte Schritt besteht darin, zu versuchen, es zu reparieren (ohne die Grundursache zu klären)

Mit dieser Idee im Hinterkopf versuchen wir, es zu reparieren. Gemäß den Geschäftsanforderungen können wir die Verwendung von ActivityIndicator nicht abbrechen, da es wirklich notwendig ist, den Benutzern entsprechende Eingabeaufforderungen zu geben.

Wir haben versucht, die Implementierung von mask zu ändern. In der alten Version haben wir die RN-Komponente „react-native-root-siblings“ eines Drittanbieters verwendet, um ein Geschwisterelement auf der Stammebene einzufügen, um unsere Ladung anzuzeigen Eingabeaufforderung.

Im Allgemeinen fügen wir nach dem Senden der Anfrage, aber bevor das Ergebnis der Anfrage eintrifft, ein neues Geschwisterelement ein und löschen es, nachdem die Anfrage abgeschlossen ist. Zu diesem Zeitpunkt wurde vermutet, dass aufgrund der wiederholten Änderung der Elementstruktur der Seite durch diesen Teil die Neu-Zerstörungslogik durch die Neu-Aktualisierungslogik ersetzt wurde, wodurch die Änderung von Elementen reduziert wurde. Beim Aktualisieren scheint nur der Versuch zu verhindern, dass der ActivityIndicator angezeigt wird, ausgeblendet zu sein.

Schritt 4: Testen Sie, ob der Fehler reproduziert werden kann

Wir hoffen, diesen Fehler zu beheben, indem wir das wiederholte Löschen und Erstellen von Seitenelementen reduzieren. Was ist das Ergebnis?
Es ist so magisch, dass es schwierig ist, es zu reproduzieren. Wir sind sehr glücklich, obwohl wir den Grund immer noch nicht verstehen.
Später sagte die Qualitätssicherung, dass es mehrmals auf echten Geräten aufgetreten sei, was uns noch mehr verwirrte. Das Rätselhafte daran ist, dass die Wahrscheinlichkeit des Auftretens tatsächlich geringer geworden ist, aber warum es immer noch auftritt.

Schritt 5: Analysieren Sie die Grundursache des Fehlers

Zu diesem Zeitpunkt müssen wir die wahre Ursache des Fehlers verstehen.
Kehren wir zur Leistung dieses Fehlers zurück. Warum löst das Klicken auf einen leeren Bereich die Fokusmethode von TextInput aus? Wir haben ein paar solcher Dinge ausprobiert.

• Finden Sie heraus, wo der Fokus von TextInput ausgelöst wird

Zusätzlich zu einer kleinen Menge an Bindungsreferenzen in der Codelogik und dem anschließenden Auslösen die .focus-Methode (Da sie nur in geringer Anzahl vorkommt, erfüllt sie nicht unser Szenario, dass alle Eingaben betroffen sind, wenn dieser Fehler auftritt. Eine schnelle Beseitigung ist nicht Teil der Ursache.) Wir haben festgestellt, dass es auch viele Stellen im TextInput gibt Von RN bereitgestellte Komponente, in der die Fokusmethode aufgerufen wird.

Das obige ist der detaillierte Inhalt vonGedanken nach der Behebung eines zufällig wiederkehrenden Tastaturproblems (ReactNative). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!