React Native Shadow Generator — iOS + Android კოდი, ცოცხალი გადახედვა

React Native-ში ჩრდილი სხვადასხვანაირად მუშაობს პლატფორმის მიხედვით: iOS კითხულობს shadowColor, shadowOffset, shadowOpacity და shadowRadius თვისებებს, ხოლო Android მთლიანად უგულებელყოფს მათ და საჭიროებს ცალკე elevation რიცხვს. დაარეგულირეთ ჩრდილი ვიზუალურად აქ და დააკოპირეთ style ობიექტი, რომელიც ორივე პლატფორმას მოიცავს, ასევე ახალი, ორივე პლატფორმისთვის საერთო boxShadow სტრიქონი New Architecture-ზე მომუშავე აპებისთვის.

რა არის ეს ხელსაწყო?

React Native-ში ჩრდილები ნაგულისხმევად პლატფორმებს შორის თავსებადი არ არის. iOS იყენებს ოთხ ცალკეულ style თვისებას (shadowColor, shadowOffset — width/height-ით, shadowOpacity 0-დან 1-მდე და shadowRadius ბუნდოვანებისთვის), რომლებიც შეესაბამება იმავე CoreAnimation ჩრდილს, რომელსაც ვების box-shadow იყენებს. Android-ის მშობლიური View სისტემა საერთოდ არ უჭერს მხარს თვითნებური ფორმის ჩრდილებს — მას მხოლოდ elevation გააჩნია, ერთი რიცხვი, რომელიც ქმნის ფიქსირებულ Material Design ჩრდილს იმის მიხედვით, თუ რამდენად „მაღლა“ ჩანს ეს View.

ეს ნიშნავს, რომ ჩრდილი, რომელიც iOS-ზე shadowRadius/shadowOpacity-ის საშუალებით სწორად გამოიყურება, Android-ზე საერთოდ არ გამოჩნდება, თუ ასევე არ დააყენებთ elevation-ს, და ეს ორი არასდროს იქნება პიქსელობრივად იდენტური, რადგან elevation-ის ჩრდილის ფორმა ისე არ არის მორგებადი, როგორც iOS-ისა. React Native 0.74-დან, New Architecture-ის ჩართვისას, ასევე ხელმისაწვდომია პლატფორმებს შორის საერთო boxShadow style თვისება, რომელიც CSS-ის იმავე სინტაქსს იყენებს.

რატომ გამოვიყენო ის?

ნახეთ ცოცხალი ვიზუალური გადახედვა, სანამ არეგულირებთ ოფსეტს, ბუნდოვანებას, გაუმჭვირვალობასა და ფერს — მოსაზრებების ნაცვლად, თქვენი აპის ხელახლა აშენების გარეშე.
მიიღეთ ერთბაშად iOS-ის ჩრდილის თვისებები, Android-ის elevation და ახალი, ორივე პლატფორმისთვის საერთო boxShadow სტრიქონი — სამი სხვადასხვა API-ის მოძებნის საჭიროების გარეშე.
Elevation ცალკე კონტროლის ერთეულია (და არ გამოითვლება ავტომატურად ბუნდოვანება/გაუმჭვირვალობიდან), რადგან Android-ის elevation-დან ჩრდილის გარეგნობამდე მიმართება არ არის iOS-ის ჩრდილის თვისებების პირდაპირი თარგმანი — თქვენ თავად უნდა მოარგოთ ის ვიზუალურად, რასაც ეს ხელსაწყო გვერდიგვერდ საშუალებას გაძლევთ.
უფასო, მყისიერი და მზად კოპირებისთვის, როგორც ერთი style ობიექტი.

როგორ გამოვიყენო

დაარეგულირეთ ოფსეტი X/Y, ბუნდოვანების რადიუსი, გაუმჭვირვალობა და ჩრდილის ფერი — გადახედვის ველი მყისიერად განახლდება.
ცალკე მოარგეთ Android-ის elevation რიცხვი, სანამ ის ვიზუალურად არ დაემთხვევა თქვენს სასურველ ჩრდილის ინტენსივობას.
დააჭირეთ „Copy“-ს სრული style ობიექტის დასაკოპირებლად, რომელიც მოიცავს iOS-ის თვისებებს, Android-ის elevation-ს და boxShadow სტრიქონს.
ჩასვით ობიექტი თქვენი კომპონენტის StyleSheet-ში — გააერთიანეთ ან შეურიეთ არსებულ view style-ებს.

მაგალითი

შეყვანა

ოფსეტი (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-ის ბუნდოვანების რადიუსი პრაქტიკაში iOS-ის shadowRadius-ს.

ხშირად დასმული კითხვები

რატომ არ ჩანს ჩემი ჩრდილი Android-ზე?

shadowColor/shadowOffset/shadowOpacity/shadowRadius თვისებები მხოლოდ iOS-ისთვისაა — Android-ის მშობლიური რენდერი უბრალოდ უგულებელყოფს მათ. საჭიროა ასევე დააყენოთ elevation თვისება (დადებითი რიცხვი), რომ ჩრდილი საერთოდ გამოჩნდეს Android-ზე.

შემიძლია Android-ის ჩრდილი iOS-ის ჩრდილის იდენტური გავხადო?

ზუსტად — არა: elevation ქმნის Android-ის ჩაშენებულ Material Design ჩრდილის ფორმას, რომელიც დამოუკიდებლად არ არის მორგებადი ფერის, ოფსეტის მიმართულების ან ბუნდოვანების მიხედვით ისე, როგორც iOS-ის ჩრდილი. შეგიძლიათ მოარგოთ elevation-ის რიცხვი ვიზუალურად მსგავსი ინტენსივობის მისაღწევად, მაგრამ პიქსელობრივად ზუსტი დამთხვევა პლატფორმებს შორის კლასიკური shadow/elevation API-ებით შეუძლებელია.

რა არის boxShadow თვისება და შემიძლია მისი ერთადერთის სახით გამოყენება?

boxShadow არის ახალი, ნამდვილად ორივე პლატფორმისთვის საერთო style თვისება (დაემატა React Native 0.74-ში, ხელმისაწვდომია New Architecture-ზე), რომელიც CSS-ის box-shadow-ის იმავე სტრიქონულ სინტაქსს იყენებს და ერთნაირად მუშაობს როგორც iOS-ზე, ისე Android-ზე. თუ თქვენი აპის React Native ვერსია და არქიტექტურა უჭერს მხარს, შეგიძლიათ გამოიყენოთ მხოლოდ ეს ერთი თვისება ოთხი ცალკეული iOS თვისებისა და elevation-ის ნაცვლად — შეამოწმეთ RN ვერსია და New Architecture-ის სტატუსი, სანამ საწარმოო გარემოში დაეყრდნობით.

რატომ არის shadowRadius ჩემს მიერ დაყენებული ბუნდოვანების ნახევარი?

ცოცხალი გადახედვა იყენებს CSS-ის box-shadow-ს, სადაც ბუნდოვანების მნიშვნელობა დაახლოებით ორჯერ უფრო შორს ვრცელდება, ვიდრე iOS-ის shadowRadius იმავე რიცხვისთვის. გენერირებული კოდი აყენებს shadowRadius-ს თქვენი ბუნდოვანების მნიშვნელობის ნახევრად, რათა გადახედვაში ხილული ჩრდილი დაემთხვეს იმას, რასაც iOS ფაქტობრივად რენდერავს — ბუნდოვანების მნიშვნელობის პირდაპირ გადატანის შემთხვევაში, iOS-ის ჩრდილი შესამჩნევად უფრო რბილი და დიდი გამოჩნდებოდა, ვიდრე გადახედვაში.

საჭიროა Platform.select ამ style-ების გამოსაყენებლად?

არა — უსაფრთხოა iOS-ის shadow* თვისებებისა და Android-ის elevation-ის ერთ style ობიექტში მოთავსება, ზუსტად ისე, როგორც გენერირებული კოდი აკეთებს: თითოეული პლატფორმა უბრალოდ უგულებელყოფს მეორის თვისებებს. Platform.select-ის დამატება მხოლოდ მაშინაა საჭირო, თუ გინდათ ნამდვილად განსხვავებული ჩრდილის დიზაინი პლატფორმების მიხედვით, და არა უბრალოდ გაფრთხილებების თავიდან ასაცილებლად (ისინი არც არსებობს).

დავაყენე elevation, მაგრამ Android-ის ჩრდილი მაინც არ ჩანს — რატომ?

ორი ყველაზე გავრცელებული მიზეზი: View-ს არ აქვს backgroundColor (Android-ის elevation ჩრდილი ეშვება View-ის გაუმჭვირვალე ფონიდან, ასე რომ გამჭვირვალე View არაფერს ისვრის), ან მშობელს აქვს overflow: 'hidden' და კვეთს ჩრდილს. მიეცით View-ს მყარი ფონის ფერი და შეამოწმეთ წინაპრების overflow პარამეტრები, სანამ დაასკვნით, რომ elevation-ის მნიშვნელობა არასწორია.