Φιλμ με φούσκα με το React Native

Τα διδάγματα που αντλήσατε κατά την δημιουργία μιας εφαρμογής Native App React με τη χρήση του κινούμενου και του PanResponder

Σε αυτό το άρθρο, θα μιλήσω για το πώς έχω εφαρμόσει μια μετάβαση app που βρήκα στο Dribbble από Ramotion.

https://dribbble.com/shots/2694049-Pagination-Controller-App-Interface

Αυτός ο ελεγκτής σελίδωσης μπορεί να χρησιμοποιηθεί για ροή κατά την επιβίβαση ή για εκπαιδευτικό πρόγραμμα.

Η πλήρης έκδοση δημοσιεύεται στην Expo και μπορείτε να την αποκτήσετε ανοίγοντας την εφαρμογή Expo και σάρωση αυτού του QR κώδικα:

https://expo.io/@narendrashetty/onboarding-blog

Ας αρχίσουμε, εμείς;

Δείτε πώς οικοδόμησα το φόντο:

Είχα Προβολή κρατώντας το χρώμα του φόντου. Αυτό περιλαμβάνει το Animated.View για την κινούμενη εικόνα φυσαλίδων. Η θέση του ήταν απόλυτη έτσι ώστε να παραμένει στην κορυφή της οθόνης. Προστέθηκα επίσης μερικά βασικά στυλ.

Στη συνέχεια, εγώ κινούσα την φούσκα επεκτείνοντας από 0 σε max χρησιμοποιώντας την κλίμακα μετασχηματισμού CSS με το Animated.timing.

Η παραπάνω κινούμενη εικόνα χρειάζεται να ενεργοποιηθεί με βάση την αλληλεπίδραση των χρηστών. Αρχικά χρησιμοποίησα το TouchableWithoutFeedback. Τότε το άλλαξα με χειρονομίες.

Τοποθέτησα τη φούσκα σύμφωνα με το gif, το οποίο κινούταν από κάτω. Το έκανα χρησιμοποιώντας κορυφαία και αριστερή ιδιοκτησία.

Καθαρός! Τα αποτελέσματα είναι όπως αναμένεται εκτός από το χρώμα. Θα επιστρέψουμε σε αυτό αργότερα.

Τώρα, αναδιάρθρωσα τον κώδικα μετακινώντας τη λογική φυσαλίδων σε ένα ξεχωριστό στοιχείο που ονομάζεται CircleTransition. Στη συνέχεια, ενεργοποίησα την κινούμενη εικόνα από το γονικό στοιχείο.

Τότε ήταν καιρός να αντιμετωπιστεί το χρώμα. Για να φτιάξω τη φούσκα με το νέο χρώμα, πέρασα το νέο χρώμα στο στοιχείο. Και μετά τη μετάβαση, έκρυψα τη φούσκα.

Μπορείτε να δείτε κάτι περίεργο στην παραπάνω μετάβαση;

Κατά τη διάρκεια της δεύτερης μετάβασης φούσκας, το χρώμα φόντου υποχωρεί στο πρώτο χρώμα. Χρειάστηκα να ενημερώσω το χρώμα του φόντου στο νέο χρώμα με τη φούσκα που μεταφέρθηκε.

Έχω περάσει μια επανάκληση στη μέθοδο εκκίνησης που εκτελέστηκε όταν ολοκληρώθηκε η μετάβαση.

Voila! Είναι όλα ρυθμισμένα. Τώρα είχα την βασική κίνηση animation.

Στη συνέχεια πήρα τη χειρονομία. Η φούσκα μεταβαίνει όταν ο χρήστης σέρνει αριστερά ή δεξιά σύμφωνα με το gif.

Δημιούργησα ένα νέο στοιχείο που ονομάζεται Swipe. Περιέχει όλη τη λογική για τη χειρονομία και αντικαθιστά τοTouchableWithoutFeedback.

Χρησιμοποίησα το PanResponderwhich συμβιβάζει μερικές πινελιές σε μια ενιαία χειρονομία. Κάνει τις χειρονομίες μονής αφής ανθεκτικές σε επιπλέον πινελιές. Μπορεί επίσης να αναγνωρίσει απλές χειρονομίες πολλαπλής αφής. Για περισσότερα σχετικά με αυτό μπορείτε να πάτε εδώ και εδώ.

Τώρα για τη λογική των χειρονομιών.

Πρώτα έπρεπε να καταλάβω σε ποια κατεύθυνση ο χρήστης πετάει. Χρειάζεται μόνο να ζωντανέψω όταν ο χρήστης σαρώνει αριστερά ή δεξιά. Επίσης, έπρεπε να ρυθμίσω κάποιο κατώφλι για να διαπιστώσω αν είναι πραγματικά ένα τζόγο ή όχι.

Εάν ήταν έγκυρο κτύπημα, ενεργοποίησα την κατάλληλη ενέργεια.

Ναί! Το μαντέψατε σωστά. Έχω πάρει αυτό που ήθελα να επιτύχω με τη χειρονομία. Στη συνέχεια, πρόσθεσα μια ενέργεια για το swipeRight. Η χειρονομία ολοκληρώθηκε με λίγη refactoring.

Αυτό είναι! Αυτό ήταν το πιο σύνθετο κομμάτι της εφαρμογής.

Δεν θα δείξω την πλήρη εργασία μου σε αυτή την εφαρμογή. Οι πληροφορίες σε αυτήν την ανάρτηση πρέπει να είναι αρκετές για να σας βοηθήσουν να δημιουργήσετε το δικό σας. Πιέστε αυτό και προσπαθήστε να ολοκληρώσετε την εφαρμογή σας ώστε να ταιριάζει με το παραπάνω gif.

Αν είστε κολλημένοι και χρειάζεστε βοήθεια, η τελική έκδοση είναι σε κλάδο αποτέλεσμα, έχετε μια ματιά. Επίσης μπορείτε να μου ping στο Twitter @narendra_shetty ή σχόλιο παρακάτω.

Και όταν ολοκληρώσετε, παρακαλούμε μοιραστείτε το σύνδεσμο Expo / GitHub.

Εάν αυτό το άρθρο σας βοήθησε, παρακαλώ χτυπάτε για μένα. Θα με παρακινήσει να γράψω περισσότερα :)