Ziehen, legen und tauschen Sie die Objektanimation?

9

Ich habe den Drag-and-Drop-Teil scheinbar funktionstüchtig, aber ich weiß nicht, wie ich die Swapping-Plätze machen soll. Ich bin mir auch nicht sicher, wie ich das Problem mit dem Z-Index behebe (es scheint etwas mit Animated.View zu tun).

%Vor%

BEARBEITEN: Ich habe versucht, das Swapping durchzuführen, aber es scheint nur ungefähr die Hälfte der Zeit zu funktionieren. Auch der zIndex macht mich immer noch verrückt. Ich drucke den Zustand wie {color} {zIndex} aus, also kann man sehen, dass er auf 100 aktualisiert wird, aber es scheint nicht zu wirken. Das Ändern der Farbe in Blau scheint jedoch zu funktionieren ... Ich bin verwirrt.

%Vor%

EDIT2: zIndex wirkt sich nur auf untergeordnete Geschwister aus, also musste ich sie auf den Elternteil (das grüne Kästchen) anstatt auf Animated.View setzen.

Der Grund, warum der Swap nur die Hälfte der Zeit geklappt hat, war, dass die Layouts in addDropzone manchmal nicht mehr in inDropzone verwendet wurden. Wenn ich die Layouts sortiere, funktioniert inDropzone so, wie ich es erwarten würde.

Insgesamt fühlt sich das Ganze immer noch wie ein GIANT HACK an. Wenn also jemand, der wirklich weiß, was er tut, Fehler in meiner Implementierung sieht und sie verbessern kann, wäre das wirklich großartig. Außerdem wäre es schön, eine Vorschau zu haben. Wenn Sie also über eine Dropzone ziehen, wird ein vorübergehender Wechsel angezeigt, was sich gerade ändert, oder andere nützliche visuelle Indikatoren, die Sie sich vorstellen können. Ziehen, Ablegen und Tauschen ist eine gängige Funktionalität für eine mobile App. Die einzige Bibliothek, die es gibt, funktioniert nur in einer vertikalen Liste. Ich musste das von Grund auf implementieren, weil ich stattdessen ein Raster aus Fotos machen wollte.

%Vor%

EDIT3: Das oben beschriebene funktioniert im Simulator sehr gut, ist aber auf einem echten iPhone extrem langsam. Es dauert zu lange, um am Anfang zu laden, bevor Sie etwas ziehen können (~ 3 Sekunden) und friert ein, während es Gegenstände tauscht (~ 1 Sekunde). Versuchen herauszufinden, warum (wahrscheinlich meine schreckliche Implementierung Sortierung / Looping über Arrays viel zu oft, aber nicht sicher, wie es anders geht). Ich konnte nicht glauben, wie viel deutlich langsamer es auf einem tatsächlichen Telefon ist.

AKTUELL: Ich werde diese Implementierungen nur untersuchen / verwenden Ссылка , Ссылка um herauszufinden, was ich falsch gemacht habe. Sie waren sehr schwer zu finden (sonst hätte ich das nicht von Grund auf gemacht und diese Frage gepostet), also hoffe ich, dass dies jemandem hilft, der versucht, dasselbe für seine App zu tun!

    
kayla 30.10.2016, 07:14
quelle

1 Antwort

0

Als erstes kann ich vorschlagen, Direct Manipulation zu verwenden. Wenn Sie Ihre Bilder transformieren möchten, müssen Sie dies mit setNativeProps tun:

%Vor%

In react-native haben wir zwei Realms, JavaScript und Native, und wir haben eine Brücke zwischen ihnen.

Hier liegt einer der wichtigsten Schlüssel zum Verständnis der Leistung von React Native. Jedes Reich an sich ist schnell. Der Leistungsengpass tritt häufig auf, wenn wir von einem Bereich zum anderen wechseln. Um die Performance von Native-Apps zu rea- gieren, müssen die Pässe über die Bridge auf ein Minimum reduziert werden.

Sie können mehr mit Beispielen hier .

Zweitens, sehen Sie Ihren Systemmonitor (Schütteln Sie Ihr Gerät, oder Befehl-D und wählen Sie Show Perf Monitor). Der wichtigste Teil ist Views, die obere Zahl ist die Anzahl der Ansichten, die Sie auf Ihrem Bildschirm haben, und die untere Zahl ist normalerweise größer, zeigt aber normalerweise an, dass Sie etwas haben, das verbessert / refaktorisiert werden könnte.

    
Esmaeil 10.12.2017 15:56
quelle

Tags und Links