Saltar al contenido
Toolars
Explorar
Informar de un error

Desarrollo · utilidad Local

Sombras para React Native

React Native Shadow Generator

Ajusta sombras de iOS, elevation de Android o la nueva propiedad boxShadow contra una vista previa en vivo, y copia el fragmento StyleSheet.

Ruta de la tarea / de la entrada al resultado

Elige la plataforma de destino

Funciona en local · No se sube nada

Cómo funciona Sombras para React Native, privacidad y herramientas relacionadas

Ruta de la tarea / de la entrada al resultado

Cómo generar una sombra de React Native

  1. 01

    Elige la plataforma de destino

    Elige primero la API de salida: el modo heredado genera propiedades de sombra iOS o elevation de Android según la plataforma; boxShadow genera una sola sombra exterior para Android 9+ compatible con React Native New Architecture. En modo heredado, elige iOS, Android o Ambas; Ambas es el valor predeterminado.

  2. 02

    Da forma a la sombra de iOS

    Elige un Color de la sombra y luego define Desplazamiento X y Desplazamiento Y de -100 a 100 px, Opacidad de 0 a 1 en pasos de 0.01 y Radio de 0 a 100 px. Los valores fuera de rango se ajustan automáticamente al límite, así que puedes escribir libremente sin producir código roto.

  3. 03

    Define el Elevation de Android

    Ajusta Elevation entre 0 y 24. Las sombras de Android provienen de la elevación y no de los desplazamientos, así que este valor controla la mitad Android de la salida mientras los números de iOS la dejan intacta. En el modo Ambas los controles de iOS siguen activos, así que las dos mitades del fragmento se pueden ajustar en paralelo.

  4. 04

    Revisa la vista previa en vivo

    La tarjeta de Vista previa en vivo renderiza una aproximación con box-shadow del navegador para la plataforma seleccionada, actualizada con cada cambio. Cargar ejemplo inserta un ejemplo índigo elevado si quieres un punto de partida más fuerte que el sutil valor por defecto.

  5. 05

    Copia el código generado

    Usa Copiar código o Descargar .ts para llevar el fragmento StyleSheet —guardado como toolars-react-native-shadow.ts— a tu proyecto. Restablecer devuelve la sombra predeterminada cuando quieres empezar de nuevo.

Datos de la herramienta

Procesamiento
En tu navegador
La entrada sale del dispositivo
Nunca
Retención
No se guarda nada
Precio
Gratis

Tus datos se quedan en el navegador.

Sombras para React Native usa su ruta de ejecución local verificada y no crea un historial oculto de entradas ni salidas.

Ejecución local

Se ejecuta dentro de la pestaña actual del navegador.

Sin procesamiento oculto

Los datos activos de la herramienta nunca se convierten en un registro de documento de Toolars.

No se necesita cuenta

Usa el flujo de trabajo principal sin crear un perfil. Los favoritos se sincronizan con tu cuenta después de iniciar sesión.

Restablecimiento inmediato

Limpia la pestaña y los datos de trabajo activos desaparecen.

Cuándo es útil Sombras para React Native

Estilos multiplataforma

Genera las propiedades de iOS y Android que pertenecen al mismo estilo de componente.

Entrega de diseño

Convierte una decisión visual de sombra en código React Native listo para copiar.

Ajuste rápido

Ajusta profundidad, color, opacidad, radio y desplazamientos contra una aproximación en vivo.

Qué hace Sombras para React Native en realidad

El archivo de diseño muestra una tarjeta que flota de una forma muy concreta, y ahora hay que construirla dos veces: una como propiedades de sombra de iOS y otra como elevation de Android. Sombras para React Native te permite ajustar el aspecto contra una aproximación en vivo y copiar el bloque StyleSheet exacto, en lugar de adivinar números y recompilar la app en cada intento. El modo heredado Ambas combina propiedades de sombra iOS y elevation de Android en el mismo fragmento; comprueba el color y el aspecto finales en cada dispositivo.

Preguntas frecuentes

¿Qué código produce el generador?
Un fragmento TypeScript que importa StyleSheet desde react-native y exporta un objeto styles con una única regla card. Para iOS emite shadowColor, shadowOffset con width y height, shadowOpacity y shadowRadius; para Android emite elevation (más shadowColor en el modo solo Android); Ambas incluye las propiedades de iOS y elevation juntas.
¿Cuáles son los valores por defecto?
La sombra por defecto apunta a Ambas plataformas con el color #111827, Desplazamiento X en 0, Desplazamiento Y en 8 px, Opacidad en 0.24, Radio en 16 px y Elevation en 8: también es exactamente lo que ves al abrir el espacio de trabajo. Restablecer vuelve a esos valores, y Cargar ejemplo los sustituye por un preset índigo más fuerte con mayor desplazamiento y radio.
¿Qué formatos de color se aceptan?
Un valor hexadecimal de seis dígitos como #111827. Cualquier cosa que no sea un color hexadecimal válido vuelve al valor por defecto en lugar de romper la salida, y los valores válidos se normalizan a mayúsculas en el código generado.
¿La vista previa es exactamente lo que mostrará el dispositivo?
No, y la tarjeta de vista previa lo indica: el navegador dibuja una aproximación con box-shadow de la plataforma seleccionada, suficiente para comparar ajustes pero no una coincidencia píxel a píxel. En los modos iOS y Ambas refleja tu desplazamiento, radio, color y opacidad; en el modo Android simula la elevación, porque los navegadores no tienen ese concepto. Confirma siempre el aspecto final en un dispositivo real o un emulador.
¿Qué rangos de valores se aceptan?
Desplazamiento X y Desplazamiento Y van de -100 a 100 px, Opacidad de 0 a 1 en pasos de 0.01, Radio de 0 a 100 px y Elevation de 0 a 24. Las entradas fuera de rango se ajustan al valor válido más cercano en lugar de producir código roto.
¿Mis ajustes se suben o se almacenan?
No. El código se genera localmente en esta pestaña, ningún ajuste de sombra se almacena ni se envía a ningún sitio, y no se necesita cuenta.
¿Cuándo elijo el nuevo modo boxShadow?
Cuando tu aplicación usa la nueva arquitectura de React Native y Android 9 o posterior. Exporta una sola sombra exterior sin elevation. En entornos anteriores usa las propiedades clásicas. El radio de desenfoque y el radio clásico no producen necesariamente los mismos píxeles; verifica el estilo en la aplicación nativa.

Continuar en Desarrollo

Tareas relacionadas, no un callejón sin salida.

Pasa a otro espacio de trabajo enfocado sin volver al índice completo.

Código a imagen

Code to Image Converter

Convierte código en una tarjeta PNG o SVG con resaltado Shiki para seis lenguajes, temas claro y oscuro, números de línea, título y escala 1x o 2x.

Crear

Generador de slugs URL

URL Slug Generator

Convierte títulos en slugs limpios en vivo: sin acentos, & convertido en and, guiones o guiones bajos como separador y escrituras no latinas intactas.

Crear

Codificador/decodificador Base64

Base64 Encoder/Decoder

Codifica texto Unicode a Base64 y decodifícalo con validación en vivo, opciones UTF-8 y URL-safe, e intercambio para la ida y vuelta. En local.

Convertir

Codificador/decodificador HTML

HTML Encoder/Decoder

Escapa &, <, > y comillas como entidades HTML o decodifica referencias con nombre y numéricas, en vivo y en local, con intercambio de dirección.

Convertir