React Native Shadow Generator — iOS + Android коды, тікелей алдын ала қарау

React Native-те көлеңке платформаға байланысты әртүрлі жұмыс істейді: iOS shadowColor, shadowOffset, shadowOpacity және shadowRadius мәндерін оқиды, ал Android бұлардың бәрін мүлдем елемей, оның орнына бөлек elevation санын қажет етеді. Көлеңкені осында көзбен көріп реттеп, екі платформаны да қамтитын style объектін, сондай-ақ New Architecture-де жұмыс істейтін қосымшаларға арналған жаңа, платформааралық boxShadow жолын көшіріп алыңыз.

Бұл құрал не істейді?

React Native-те көлеңкелер әдепкі бойынша платформааралық емес. iOS төрт бөлек style қасиетін қолданады (shadowColor, ені мен биіктігі бар shadowOffset, 0-ден 1-ге дейінгі shadowOpacity және бұлыңғырлыққа арналған shadowRadius), олар веб-тегі box-shadow пайдаланатын CoreAnimation көлеңкесінің дәл өзіне сәйкес келеді. Android-тың негізгі View жүйесі кез келген пішіндегі көлеңкені мүлдем қолдамайды — ол тек elevation-ды ғана қолдайды, яғни View «қаншалықты биік» қалқып тұрғанына қарай тұрақты Material Design көлеңкесін жасайтын жалғыз санды.

Бұл дегеніміз, iOS-та shadowRadius/shadowOpacity арқылы дұрыс көрінетін көлеңке, elevation орнатылмаса, Android-та мүлдем көрінбейді, әрі бұл екеуі ешқашан пиксельдей дәл сәйкес келмейді, себебі elevation көлеңкесінің пішіні iOS-тікіндей еркін бапталмайды. React Native 0.74 нұсқасынан бастап, New Architecture қосылған кезде, CSS-пен бірдей синтаксисті қолданатын платформааралық boxShadow style қасиеті де қолжетімді.

Оны неге пайдалану керек?

Мәндерді болжап, қосымшаны қайта құрастырудың орнына, ығысу, бұлыңғырлық, мөлдірсіздік пен түсті реттеу барысында тікелей көзбен көрінетін алдын ала қарауды көріңіз.
iOS көлеңке қасиеттерін, Android elevation-ды және жаңа платформааралық boxShadow жолын бірден алыңыз — үш түрлі API-ды іздестірудің қажеті жоқ.
Elevation — бөлек басқару элементі (бұлыңғырлық/мөлдірсіздіктен автоматты есептелмейді), себебі Android-тың elevation-нан көлеңке көрінісіне дейінгі байланысы iOS көлеңке қасиеттерінің тікелей аудармасы емес — оны көзбен сәйкестендіру үшін өзіңіз баптауыңыз керек, ал бұл құрал сізге екеуін қатар қойып баптауға мүмкіндік береді.
Тегін, лезде дайын болады және бір ғана style объектісі ретінде көшіруге дайын.

Оны қалай пайдалану керек

X/Y ығысуын, бұлыңғырлық радиусын, мөлдірсіздікті және көлеңке түсін реттеңіз — алдын ала қарау жәшігі тікелей жаңарып отырады.
Android elevation санын ол сіз көздеген көлеңке қарқындылығына көзбен сәйкес келгенше бөлек баптаңыз.
iOS қасиеттерін, Android elevation-ды және boxShadow жолын қамтитын толық style объектісін көшіру үшін «Copy» түймесін басыңыз.
Объектіні компонентіңіздің 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-тың негізгі рендерингі оларды жай ғана елемейді. Android-та көлеңкенің көрінуі үшін elevation қасиетін (оң санды) де орнатуыңыз керек.

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-тағы көлеңке алдын ала қараудан айтарлықтай жұмсақ және үлкен көрінер еді.

Бұл style-дарды қолдану үшін Platform.select керек пе?

Жоқ — iOS-тың shadow* қасиеттері мен Android-тың elevation-ын бір style объектіне қоюға болады, дәл жасалған код жасайтындай: әр платформа екінші жағының қасиеттерін жай ғана елемейді. Platform.select тек әр платформаға шынымен әртүрлі көлеңке дизайнын қаласаңыз ғана қосуға тұрарлық, ескертулерден құтылу үшін емес (ескертулер жоқ).

Elevation-ды орнаттым, бірақ Android көлеңкесі әлі көрінбейді — неге?

Ең жиі кездесетін екі себеп: view-де backgroundColor жоқ (Android-тың elevation көлеңкесі view-дың мөлдір емес фонынан түседі, сондықтан мөлдір view ешнәрсе түсірмейді), немесе ата-ана элементінде overflow: 'hidden' бар және ол көлеңкені кесіп тастайды. Elevation мәні қате деп ойламас бұрын, view-ге тұтас фон түсін беріп, ата-аналардың overflow баптауларын тексеріп көріңіз.