Κινούμενο γράφημα σε React Native

Πρόσφατα έψαχνα μια βιβλιοθήκη γραφικών React Native για την εφαρμογή Savee.io μου. Κατά τη διάρκεια της έρευνας, συνειδητοποίησα ότι δεν είναι εύκολο να ασχοληθούμε με γραφήματα στο React Native. Και αν θέλετε να τους ζωντανέψετε; Φαίνεται σχεδόν αδύνατο. Το παρακάτω gif είναι αυτό που έχω κάνει και θα μιλήσω σε αυτό το "tutorial"!

Στόχος αυτού του άρθρου

Χωρίς βιβλιοθήκη ART

Όταν έκανα την έρευνά μου για τα γραφήματα στο React Native, ανακάλυψα ότι σχεδόν όλοι χρησιμοποιούν τη βιβλιοθήκη ART. Ποια είναι πραγματικά δροσερή και ισχυρή βιβλιοθήκη σχεδίασης. Κοιτάξτε αυτό το διάγραμμα πίτας που έχει γίνει από την βιβλιοθήκη ART για την εφαρμογή Savee.io.

Βιβλιοθήκη πίτας βιβλιοθήκης ART στο savee.io

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

Το γράφημα στήλης για το οποίο θα μιλήσω (και μπορείτε να το δείτε στο gif παρακάτω) έχει γίνει από το καθαρό React Native. Δεν υπάρχει βιβλιοθήκη ART!

Ας το κάνουμε λίγο περίπλοκο

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

Σχέδιο

Αποφάσισα να κάνω κάθε στήλη χωριστά ως συστατικό στοιχείο. Έτσι θα μπορούσα να προσθέσω ένα αποτέλεσμα "καθυστέρησης". Μπορείτε να δείτε ότι η κινούμενη εικόνα ξεκινά τυχαία για κάθε μία στήλη όταν το γράφημα αλλάζει μια θέση της γραμμής βάσης. Ας δουλέψουμε με το ύψος 200. Το ύψος της αξίας μπορεί να είναι 25 και το ύψος της ετικέτας 25 επίσης. Αυτό κάνει 150 για τη στήλη.

Διάταξη για μια μόνο στήλη

Εάν το ύψος του γραφήματος είναι 150 τότε το ύψος της στήλης είναι 300. Κάθε στήλη έχει ένα θετικό μέρος (Α) και ένα αρνητικό μέρος (Β). Η απέναντι πλευρά αυτών των τμημάτων είναι πάντα κρυμμένη. Το Α είναι κρυμμένο για το αρνητικό μέρος και το Β είναι κρυμμένο για το θετικό μέρος. Σημαίνει ότι εάν μετακινήσουμε το θετικό μέρος (Α) κάτω από την γραμμή βάσης στο χώρο Β, η θετική στήλη θα κρυφτεί τελείως. Αυτό θέλουμε όταν η τιμή είναι αρνητική.

Τα θετικά τμήματα των στηλών (αριστερή πλευρά) και τα αρνητικά μέρη των ίδιων στηλών (δεξιά τμήματα)

Μπορείτε να δείτε την αρνητική τιμή για την τελευταία στήλη της εικόνας. Η τιμή είναι -5. Η θετική στήλη κινείται τελείως κάτω από την γραμμή βάσης (είναι κρυμμένη) και η αρνητική στήλη μετακινείται στην κατάλληλη θέση Υ για να αντιπροσωπεύει την τιμή -5. Μια μέγιστη τιμή για αυτό το γράφημα είναι 10 (πρώτη στήλη). Σημαίνει ότι το -5 θα είναι στη μέση ενός αρνητικού μέρους (75/2).

Πρέπει να κάνουμε λίγα μαθηματικά εδώ επειδή πρέπει να παρεμβάλουμε την πραγματική τιμή στη θέση Υ. Αλλά δεν πρόκειται να μιλήσω γι 'αυτό εδώ. Πιστεύω ότι μπορείτε να υπολογίσετε τα πάντα εύκολα.

Κινούμενη στήλη

Χρησιμοποίησα τη βιβλιοθήκη ανοιχτού κώδικα που ονομάζεται αντίδραση-native-motion και component TranslateY. Αυτό κάνει τα κινούμενα σχέδια πραγματικά εύκολο να εφαρμοστούν. Κοιτάξτε τον κώδικα. Ευνόητος. Χρησιμοποιούμε το στοιχείο TranslateY με τον ίδιο τρόπο όπως θα χρησιμοποιούσαμε το στοιχείο View. Το μόνο που πρέπει να κάνουμε είναι να υπολογίσουμε τις θέσεις Υ για θετική στήλη, αρνητική στήλη, γραμμή βάσης και μια ετικέτα τιμής.

Ελέγξτε το αποτέλεσμα σε μια πραγματική εφαρμογή. Το Savee.io έχει ήδη εφαρμόσει το γράφημα στήλης. Όπως είπα και πριν, όλα γίνονται από το νήμα του UI (είναι αρκετά γρήγορο). Υπάρχει ένα γεγονός onPress ώστε να μπορείτε να αλλάξετε τους μήνες. Όταν επιλέγετε την κατηγορία, θα αλλάξει η τιμή ενός γραφήματος και θα αναπληρωθούν οι θέσεις Υ. Στη συνέχεια, η αντίδραση-μητρική-κίνηση ασχολείται με κινούμενα σχέδια.

Κινούμενος αριθμός

Η κινούμενη εικόνα είναι ένα πρόβλημα λίγο. Επειδή δεν μπορούμε να το μεταφέρουμε στο νήμα UI. Πρέπει να γίνει με το νήμα JS. Έχω δει ότι οι προγραμματιστές συνήθως έχουν το αποτέλεσμα που έχει γίνει από το setInterval. Φυσικά, μπορείτε να το χρησιμοποιήσετε, αλλά ήθελα να το κάνω ασφαλέστερο.

Επομένως, χρησιμοποιώ το Animated API του React Native, ακόμη και για το κινούμενο αριθμό. Μπορούμε να προσθέσουμε έναν ακροατή σε κινούμενη αξία και όταν αλλάξει η τιμή, απλά ανακατασκευάσαμε τον αριθμό. Είναι εύκολο και μπορείτε να επωφεληθείτε από το Animated API. Χρησιμοποιώντας για παράδειγμα μια χαλάρωση. Και τι είναι το καλύτερο; Έβαλα το στοιχείο στη βιβλιοθήκη αντίδρασης-φυσικής κίνησης, η οποία είναι ανοιχτή για τους εσάς

Απλά πρέπει να γράψετε μερικές γραμμές όπως αυτό. Μόλις αλλάξει η τιμή στον κωδικό σας, θα φροντίσετε τα υπόλοιπα.

Διατίθεται σε αντιδραστική-φυσική κίνηση

Σου άρεσε? Clap, Ακολουθήστε και Ζωντανέψτε το!

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

Σχετικά με μένα

Είμαι συγγραφέας του Savee.io (το οποίο επίσης χρησιμοποιώ ως παιδική χαρά για τα κινούμενα σχέδια μου). Και συγγραφέας βιβλιοθηκών αντιδραστικών-φυσικών υλικών-ui και φυσικής κίνησης. Γράφοντας για αυτά σε αυτό το ιστολόγιο.

Αν χρειάζεστε βοήθεια με την εφαρμογή React Native (κινούμενα σχέδια, επιδόσεις κ.λπ.), ενημερώστε με, παρακαλώ.) Θα χαρούμε να το συζητήσουμε.
LinkedIn || Github || Κελάδημα