CodeKitHubΤι είναι αυτό το εργαλείο;
Στο React Native, οι σκιές δεν είναι εξ ορισμού πολυπλατφορμικές. Το iOS χρησιμοποιεί τέσσερις ξεχωριστές ιδιότητες στυλ (shadowColor, shadowOffset με width/height, shadowOpacity από 0 έως 1, και shadowRadius για το θόλωμα) που αντιστοιχούν στην ίδια υποκείμενη σκιά CoreAnimation που χρησιμοποιεί και το box-shadow στο web. Το εγγενές σύστημα View του Android δεν υποστηρίζει καθόλου αυθαίρετα σχήματα σκιάς — υποστηρίζει μόνο το elevation, έναν μοναδικό αριθμό που παράγει μια σταθερή σκιά τύπου Material Design ανάλογα με το πόσο «ψηλά» φαίνεται να αιωρείται το view.
Αυτό σημαίνει ότι μια σκιά που φαίνεται σωστή στο iOS χρησιμοποιώντας shadowRadius/shadowOpacity δεν θα εμφανιστεί καθόλου στο Android, εκτός αν ορίσετε επίσης elevation, και οι δύο ποτέ δεν θα φαίνονται πανομοιότυπες σε επίπεδο pixel, καθώς το σχήμα της σκιάς στο elevation δεν είναι προσαρμόσιμο όπως στο iOS. Από το React Native 0.74 και μετά, με ενεργοποιημένη τη New Architecture, είναι επίσης διαθέσιμη η πολυπλατφορμική ιδιότητα στυλ boxShadow, η οποία χρησιμοποιεί την ίδια σύνταξη με το CSS.
Γιατί να το χρησιμοποιήσετε;
- Δείτε μια ζωντανή οπτική προεπισκόπηση καθώς ρυθμίζετε την απόκλιση, το θόλωμα, τη διαφάνεια και το χρώμα — αντί να μαντεύετε τιμές και να ξαναχτίζετε την εφαρμογή σας για έλεγχο.
- Αποκτήστε ταυτόχρονα τις ιδιότητες σκιάς για iOS, το elevation για Android, και το νεότερο πολυπλατφορμικό string boxShadow, χωρίς να χρειάζεται να ψάξετε σε τρία διαφορετικά API.
- Το elevation είναι ξεχωριστό στοιχείο ελέγχου (δεν υπολογίζεται αυτόματα από το θόλωμα/τη διαφάνεια), επειδή η αντιστοίχιση elevation προς εμφάνιση σκιάς στο Android δεν είναι άμεση μετάφραση των ιδιοτήτων σκιάς του iOS — προορίζεται να ρυθμιστεί οπτικά ώστε να ταιριάζει, κάτι που αυτό το εργαλείο σάς επιτρέπει να κάνετε παράλληλα.
- Δωρεάν, άμεσο, και έτοιμο για αντιγραφή ως ενιαίο αντικείμενο στυλ.
Πώς χρησιμοποιείται
- Ρυθμίστε την απόκλιση X/Y, την ακτίνα θολώματος, τη διαφάνεια και το χρώμα της σκιάς — το πλαίσιο προεπισκόπησης ενημερώνεται ζωντανά.
- Ρυθμίστε ξεχωριστά τον αριθμό elevation για Android μέχρι να ταιριάζει οπτικά με την επιθυμητή ένταση σκιάς.
- Κάντε κλικ στο «Αντιγραφή» για να αντιγράψετε ολόκληρο το αντικείμενο στυλ, συμπεριλαμβανομένων των ιδιοτήτων iOS, του elevation για Android, και του string boxShadow.
- Επικολλήστε το αντικείμενο στο StyleSheet του component σας — συγχωνεύστε το (spread) ή ενσωματώστε το με τα υπάρχοντα στυλ του view σας.
Παράδειγμα
Είσοδος
Απόκλιση (0, 4), θόλωμα 8, διαφάνεια 0,25, μαύρο, elevation 5Έξοδος
shadowColor: '#000000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.25, shadowRadius: 4, elevation: 5, boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.25)'Το shadowRadius ορίζεται στο μισό της τιμής θολώματος που εμφανίζεται στην προεπισκόπηση, αντιστοιχώντας στο πώς η ακτίνα θολώματος του CSS σχετίζεται στην πράξη με το shadowRadius του iOS.
Συχνές ερωτήσεις
Γιατί η σκιά μου δεν εμφανίζεται στο Android;
Οι ιδιότητες shadowColor/shadowOffset/shadowOpacity/shadowRadius αφορούν μόνο το iOS — η εγγενής απόδοση του Android απλώς τις αγνοεί. Πρέπει επίσης να ορίσετε την ιδιότητα elevation (έναν θετικό αριθμό) για να εμφανιστεί καθόλου σκιά στο Android.
Μπορώ να κάνω τη σκιά στο Android να φαίνεται πανομοιότυπη με αυτή στο iOS;
Όχι ακριβώς — το elevation παράγει το ενσωματωμένο σχήμα σκιάς Material Design του Android, το οποίο δεν μπορεί να ρυθμιστεί ανεξάρτητα ως προς το χρώμα, την κατεύθυνση της απόκλισης ή το θόλωμα όπως η σκιά του iOS. Μπορείτε να ρυθμίσετε τον αριθμό elevation ώστε να επιτύχετε οπτικά παρόμοια ένταση, αλλά η τέλεια αντιστοίχιση σε επίπεδο pixel μεταξύ πλατφορμών δεν είναι εφικτή με τα κλασικά API shadow/elevation.
Τι είναι η ιδιότητα boxShadow και μπορώ να τη χρησιμοποιήσω αντ' αυτού;
Το boxShadow είναι μια νεότερη, πραγματικά πολυπλατφορμική ιδιότητα στυλ (προστέθηκε στο React Native 0.74, διαθέσιμη στη New Architecture) που χρησιμοποιεί την ίδια σύνταξη string με το CSS box-shadow και λειτουργεί πανομοιότυπα τόσο σε iOS όσο και σε Android. Αν η έκδοση React Native και η αρχιτεκτονική της εφαρμογής σας το υποστηρίζουν, μπορείτε να χρησιμοποιήσετε μόνο αυτή τη μία ιδιότητα αντί για τις τέσσερις ξεχωριστές ιδιότητες iOS συν το elevation — ελέγξτε την έκδοση RN και την κατάσταση της New Architecture πριν βασιστείτε σε αυτήν σε παραγωγικό περιβάλλον.
Γιατί το shadowRadius είναι το μισό της τιμής θολώματος που όρισα;
Η ζωντανή προεπισκόπηση χρησιμοποιεί το box-shadow του CSS, όπου η τιμή θολώματος εξαπλώνεται περίπου διπλάσια απόσταση σε σχέση με το αντίστοιχο shadowRadius του iOS για τον ίδιο αριθμό. Ο παραγόμενος κώδικας ορίζει το shadowRadius στο μισό της τιμής θολώματος, ώστε η σκιά που βλέπετε στην προεπισκόπηση να ταιριάζει με αυτό που πραγματικά αποδίδει το iOS — αν αντιγράφατε την τιμή θολώματος απευθείας, η σκιά στο iOS θα φαινόταν αισθητά πιο απαλή και μεγαλύτερη από την προεπισκόπηση.
Χρειάζομαι το Platform.select για να εφαρμόσω αυτά τα στυλ;
Όχι — είναι ασφαλές να βάλετε τις ιδιότητες shadow* του iOS και το elevation του Android μαζί σε ένα αντικείμενο στυλ, ακριβώς όπως κάνει ο παραγόμενος κώδικας: κάθε πλατφόρμα απλώς αγνοεί τις ιδιότητες της άλλης. Αξίζει να προσθέσετε το Platform.select μόνο αν θέλετε πραγματικά διαφορετικά σχέδια σκιάς ανά πλατφόρμα, όχι απλώς για να αποφύγετε προειδοποιήσεις (δεν υπάρχουν).
Όρισα το elevation, αλλά η σκιά στο Android εξακολουθεί να μην εμφανίζεται — γιατί;
Οι δύο πιο συνηθισμένες αιτίες: το view δεν έχει backgroundColor (η σκιά elevation στο Android προβάλλεται από το αδιαφανές φόντο του view, οπότε ένα διάφανο view δεν προβάλλει καμία σκιά), ή κάποιος γονέας έχει overflow: 'hidden' και κόβει τη σκιά. Δώστε στο view ένα συμπαγές χρώμα φόντου και ελέγξτε τις ρυθμίσεις overflow των προγόνων πριν υποθέσετε ότι η τιμή elevation είναι λανθασμένη.