Генератор тіней React Native

Тінь у React Native працює по-різному на кожній платформі: iOS зчитує shadowColor, shadowOffset, shadowOpacity та shadowRadius, тоді як Android ігнорує все це і натомість потребує окремого числа elevation. Налаштуйте тінь візуально тут і скопіюйте об'єкт стилю, що охоплює обидві платформи, а також новіший міжплатформний рядок boxShadow для застосунків на New Architecture.

Що це за інструмент?

У React Native тіні за замовчуванням не є міжплатформними. iOS використовує чотири окремі властивості стилю (shadowColor, shadowOffset з width/height, shadowOpacity від 0 до 1 та shadowRadius для розмиття), які відповідають тій самій базовій тіні CoreAnimation, яку використовує веб-властивість box-shadow. Нативна система View в Android взагалі не підтримує довільні форми тіней — вона підтримує лише elevation, одне число, яке створює фіксовану тінь у стилі Material Design залежно від того, наскільки "високо" начебто ширяє елемент.

Це означає, що тінь, яка виглядає правильно на iOS за допомогою shadowRadius/shadowOpacity, взагалі не з'явиться на Android, якщо ви також не встановите elevation, і вони ніколи не виглядатимуть піксель-у-піксель однаково, оскільки форма тіні elevation не налаштовується так, як на iOS. Починаючи з React Native 0.74 з увімкненою New Architecture, також доступна міжплатформна властивість стилю boxShadow, яка використовує той самий синтаксис, що й CSS.

Навіщо його використовувати?

Дивіться живий візуальний перегляд під час налаштування зсуву, розмиття, непрозорості та кольору — замість того, щоб вгадувати значення й перезбирати застосунок для перевірки.
Отримайте властивості тіні iOS, elevation для Android і новіший міжплатформний рядок boxShadow одразу, щоб не шукати три різні API.
Elevation — це окремий елемент керування (не обчислюється автоматично з розмиття/непрозорості), оскільки відповідність elevation вигляду тіні в Android не є прямим перекладом властивостей тіні iOS — його потрібно налаштувати так, щоб вигляд збігався візуально, що цей інструмент дозволяє робити пліч-о-пліч.
Безкоштовно, миттєво і готово до копіювання як єдиний об'єкт стилю.

Як користуватися

Налаштуйте зсув X/Y, радіус розмиття, непрозорість і колір тіні — вікно попереднього перегляду оновлюється в реальному часі.
Окремо налаштуйте число elevation для Android, поки воно візуально не відповідатиме бажаній силі тіні.
Натисніть "Копіювати", щоб скопіювати повний об'єкт стилю, включно з властивостями iOS, elevation для Android і рядком boxShadow.
Вставте об'єкт у StyleSheet вашого компонента — розгорніть (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 просто їх ігнорує. Щоб тінь взагалі з'явилася на Android, потрібно також встановити властивість elevation (додатне число).

Чи можу я зробити так, щоб тінь на Android виглядала ідентично тіні на iOS?

Не зовсім — elevation створює вбудовану форму тіні Material Design в Android, яку не можна незалежно налаштувати за кольором, напрямком зсуву чи розмиттям так, як тінь iOS. Ви можете налаштувати число elevation, щоб отримати візуально схожу силу, але ідеальну відповідність піксель-у-піксель між платформами неможливо досягти класичними API shadow/elevation.

Що таке властивість boxShadow і чи можу я використовувати її замість цього?

boxShadow — це новіша, справді міжплатформна властивість стилю (додана в React Native 0.74, доступна на New Architecture), яка використовує той самий синтаксис рядка, що й CSS box-shadow, і працює однаково на iOS і Android. Якщо версія React Native і архітектура вашого застосунку це підтримують, ви можете використовувати лише цю одну властивість замість чотирьох окремих властивостей iOS плюс elevation — перевірте свою версію RN і статус New Architecture, перш ніж покладатися на це в продакшені.

Чому shadowRadius дорівнює половині встановленого мною значення розмиття?

Живий перегляд використовує CSS box-shadow, де значення розмиття поширюється приблизно вдвічі далі, ніж 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 неправильне.