Перейти к содержимому
Toolars
Каталог
Сообщить об ошибке

Разработка · утилита · Локально

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

React Native Shadow Generator

Сравнивайте устаревшие тени и boxShadow в React Native, настраивайте вывод для iOS и Android рядом и копируйте код StyleSheet.

Путь задачи / от ввода к результату

Выберите целевую платформу

Работает локально · Ничего не загружается на сервер

Как работает Генератор теней React Native, конфиденциальность и похожие инструменты

Путь задачи / от ввода к результату

Как сгенерировать тень для React Native

  1. 01

    Выберите целевую платформу

    Сначала выберите API вывода: режим Legacy создаёт свойства тени iOS или elevation Android по платформе, а boxShadow — одну внешнюю тень для Android 9+ с поддержкой React Native New Architecture. В режиме Legacy выберите iOS, Android или «Обе»; по умолчанию выбраны обе.

  2. 02

    Сформируйте тень для iOS

    Выберите «Цвет тени», затем задайте «Смещение X» и «Смещение Y» от -100 до 100 px, «Непрозрачность» от 0 до 1 с шагом 0.01 и «Радиус» от 0 до 100 px. Значения за пределами диапазона автоматически прижимаются к границе, так что можно вводить свободно, не опасаясь сломанного кода.

  3. 03

    Задайте Elevation для Android

    Настройте Elevation от 0 до 24. Тени в Android строятся на elevation, а не на смещениях, поэтому это значение определяет Android-часть результата, а числа iOS её не трогают. В режиме «Обе» элементы управления iOS остаются активными, так что обе половины фрагмента настраиваются рядом.

  4. 04

    Проверьте живой предпросмотр

    Карточка «Предпросмотр в реальном времени» рисует браузерную box-shadow-аппроксимацию выбранной платформы, обновляемую при каждом изменении. «Загрузить пример» подставляет приподнятый индиго-вариант, если нужна отправная точка сильнее нежного значения по умолчанию.

  5. 05

    Скопируйте сгенерированный код

    Нажмите «Копировать код» или «Скачать .ts», чтобы забрать фрагмент StyleSheet — сохраняемый как toolars-react-native-shadow.ts — в свой проект. «Сбросить» возвращает тень по умолчанию, когда хочется начать заново.

Факты об инструменте

Обработка
В вашем браузере
Ввод покидает устройство
Никогда
Хранение
Ничего не сохраняется
Цена
Бесплатно

Ваши данные остаются в браузере.

Генератор теней React Native использует проверенный путь локального выполнения и не создаёт скрытую историю ввода и вывода.

Локальное выполнение

Работает внутри текущей вкладки браузера.

Никакой скрытой обработки

Активные данные инструмента никогда не становятся записями документов Toolars.

Аккаунт не требуется

Используйте основной сценарий без создания профиля. Избранное синхронизируется с аккаунтом после входа.

Мгновенный сброс

Закройте вкладку — и рабочие данные исчезнут.

Когда пригодится Генератор теней React Native

Кроссплатформенные стили

Генерируйте свойства iOS и Android, относящиеся к одному стилю компонента.

Передача дизайна

Превратите визуальное решение о тени в готовый к копированию код React Native.

Быстрая настройка

Настраивайте глубину, цвет, прозрачность, радиус и смещение по живому приближению.

Что на самом деле делает Генератор теней React Native

В макете дизайна карточка парит ровно так, как надо, и теперь её нужно воспроизвести дважды: один раз свойствами тени iOS и один раз elevation для Android. Генератор теней React Native позволяет настроить вид по живой аппроксимации и скопировать точный блок StyleSheet, вместо того чтобы подбирать числа и пересобирать приложение после каждой догадки. Режим Legacy «Обе» объединяет свойства тени iOS и elevation Android в одном фрагменте; итоговый цвет и вид проверяйте отдельно на каждом устройстве.

Частые вопросы

Какой код производит генератор?
Фрагмент TypeScript, который импортирует StyleSheet из react-native и экспортирует объект styles с единственным правилом card. Для iOS он выдаёт shadowColor, shadowOffset с width и height, shadowOpacity и shadowRadius; для Android — elevation (плюс shadowColor в режиме только Android); «Обе» включает свойства iOS и elevation вместе.
Какие значения стоят по умолчанию?
Тень по умолчанию нацелена на «Обе» платформы с цветом #111827, «Смещение X» равным 0, «Смещение Y» 8 px, «Непрозрачность» 0.24, «Радиус» 16 px и Elevation 8 — ровно то, что вы видите при первом открытии рабочего пространства. «Сбросить» возвращает эти значения, а «Загрузить пример» подставляет более сильный индиго-пресет с большими смещением и радиусом.
Какие форматы цвета принимаются?
Шестизначное hex-значение вроде #111827. Всё, что не является корректным hex-цветом, откатывается к значению по умолчанию вместо того, чтобы сломать вывод, а корректные значения нормализуются к верхнему регистру в сгенерированном коде.
Предпросмотр точно совпадает с тем, что покажет устройство?
Нет, и карточка предпросмотра прямо об этом говорит: браузер рисует box-shadow-аппроксимацию выбранной платформы, которой достаточно для сравнения настроек, но это не попиксельное совпадение. В режимах iOS и «Обе» она отражает ваши смещение, радиус, цвет и непрозрачность; в режиме Android имитирует подъём elevation, потому что у браузеров нет такого понятия. Финальный вид всегда проверяйте на реальном устройстве или эмуляторе.
Какие диапазоны значений принимаются?
«Смещение X» и «Смещение Y» — от -100 до 100 px, «Непрозрачность» — от 0 до 1 с шагом 0.01, «Радиус» — от 0 до 100 px, Elevation — от 0 до 24. Значения вне диапазона прижимаются к ближайшему допустимому вместо того, чтобы породить сломанный код.
Мои настройки загружаются или хранятся где-то?
Нет. Код генерируется локально в этой вкладке, настройки тени нигде не хранятся и никуда не отправляются, а учётная запись не требуется.
Когда выбирать новый режим boxShadow?
Если приложение использует новую архитектуру React Native и рассчитано на Android 9 или новее. Режим выдаёт одну внешнюю тень без elevation. Для старых сред используйте прежние свойства. Радиус размытия не гарантирует вид, идентичный старой тени; проверьте стиль в нативном приложении.

Продолжить: Разработка

Связанные задачи, а не тупик.

Перейдите в другую сфокусированную рабочую область, не возвращаясь к полному каталогу.

Код в изображение

Code to Image Converter

Экспортируйте код с подсветкой в PNG или SVG: шесть языков, светлая и тёмная темы, номера строк, заголовок окна и масштаб 1x или 2x.

Создание

Генератор URL-слагов

URL Slug Generator

Превращайте заголовки в чистые слаги с дефисами или подчёркиваниями: диакритика снимается, амперсанды разворачиваются, нелатиница сохраняется.

Создание

Кодирование / декодирование Base64

Base64 Encoder/Decoder

Кодируйте Unicode-текст в Base64 и обратно с живой валидацией, режимами URL-safe и UTF-8 и кнопкой обмена для круговых проверок.

Конвертация

Кодирование / декодирование HTML

HTML Encoder/Decoder

Экранируйте пять критичных для разметки символов или декодируйте именованные и числовые сущности HTML — локально, в один клик туда-обратно.

Конвертация