Pular para o conteúdo
Toolars
Explorar
Reportar erro

Desenvolvimento · utilitário Local

Sombras para React Native

React Native Shadow Generator

Compare propriedades de sombra legadas e boxShadow no React Native, ajuste iOS e Android lado a lado e copie o código do StyleSheet.

Caminho da tarefa / da entrada ao resultado

Escolha a plataforma de destino

Roda localmente · Nada é enviado

Como Sombras para React Native funciona, privacidade e ferramentas relacionadas

Caminho da tarefa / da entrada ao resultado

Como gerar uma sombra para React Native

  1. 01

    Escolha a plataforma de destino

    Escolha primeiro a API de saída: o modo legado gera propriedades de sombra do iOS ou elevation do Android conforme a plataforma; boxShadow gera uma única sombra externa para Android 9+ compatível com React Native New Architecture. No modo legado, selecione iOS, Android ou Ambas; Ambas é o padrão.

  2. 02

    Molde a sombra do iOS

    Escolha uma Cor da sombra, depois defina Deslocamento X e Deslocamento Y de -100 a 100 px, Opacidade de 0 a 1 em passos de 0,01, e Raio de 0 a 100 px. Valores fora de um intervalo são ajustados a ele automaticamente, então você pode digitar livremente sem produzir código quebrado.

  3. 03

    Defina a elevação do Android

    Ajuste a Elevação de 0 a 24. Sombras no Android vêm da elevação, não de deslocamentos, então esse valor comanda a metade Android da saída enquanto os números do iOS não a tocam. No modo Ambas os controles de iOS permanecem ativos, então as duas metades do trecho podem ser ajustadas lado a lado.

  4. 04

    Confira a pré-visualização ao vivo

    O cartão de Pré-visualização ao vivo renderiza uma aproximação em box-shadow do navegador para a plataforma selecionada, atualizada a cada mudança. Carregar exemplo insere um exemplo índigo elevado se você quiser um ponto de partida mais forte que o padrão sutil.

  5. 05

    Copie o código gerado

    Use Copiar código ou Baixar .ts para levar o trecho StyleSheet — salvo como toolars-react-native-shadow.ts — para o seu projeto. Redefinir restaura a sombra padrão quando você quiser recomeçar.

Fatos da ferramenta

Processamento
No seu navegador
A entrada sai deste dispositivo
Nunca
Retenção
Nada é armazenado
Preço
Grátis

Sua entrada fica no navegador.

Sombras para React Native usa seu caminho de execução local verificado e não cria um histórico oculto de entradas ou saídas.

Execução local

Roda dentro da aba atual do navegador.

Sem processamento oculto

Os dados ativos da ferramenta nunca viram um registro de documento do Toolars.

Não precisa de conta

Use o fluxo principal sem criar um perfil. Os favoritos sincronizam com sua conta depois que você entra.

Redefinição imediata

Limpe a aba e os dados de trabalho ativos desaparecem.

Quando Sombras para React Native é útil

Estilos multiplataforma

Gere as propriedades de iOS e Android que pertencem ao mesmo estilo de componente.

Handoff de design

Transforme uma decisão visual de sombra em código React Native pronto para copiar.

Ajuste rápido

Ajuste profundidade, cor, opacidade, raio e deslocamentos contra uma aproximação ao vivo.

O que Sombras para React Native realmente faz

O arquivo de design mostra um cartão que flutua na medida certa, e agora ele precisa existir duas vezes: uma como propriedades de sombra do iOS e outra como elevação do Android. O gerador de sombras para React Native permite ajustar o visual contra uma aproximação ao vivo e copiar o bloco StyleSheet exato, em vez de ajustar números à mão e recompilar o app a cada tentativa. O modo legado Ambas combina propriedades de sombra do iOS e elevation do Android no mesmo trecho; confira cor e aparência finais em cada dispositivo.

Perguntas frequentes

Que código o gerador produz?
Um trecho TypeScript que importa StyleSheet de react-native e exporta um objeto styles com uma única regra de cartão. Para iOS ele emite shadowColor, shadowOffset com width e height, shadowOpacity e shadowRadius; para Android emite elevation (mais shadowColor no modo somente Android); Ambas inclui as propriedades de iOS e elevation juntas.
Quais são os valores padrão?
A sombra padrão mira Ambas as plataformas com a cor #111827, Deslocamento X em 0, Deslocamento Y em 8 px, Opacidade em 0,24, Raio em 16 px e Elevação em 8 — exatamente o que você vê quando o espaço de trabalho abre pela primeira vez. Redefinir volta a esses valores, e Carregar exemplo troca por um preset índigo mais forte com deslocamento e raio maiores.
Quais formatos de cor são aceitos?
Um valor hexadecimal de seis dígitos como #111827. Qualquer coisa que não seja uma cor hexadecimal válida volta ao padrão em vez de quebrar a saída, e valores válidos são normalizados para maiúsculas no código gerado.
A pré-visualização é exatamente o que o dispositivo vai mostrar?
Não, e o cartão de pré-visualização deixa isso claro: o navegador renderiza uma aproximação em box-shadow da plataforma selecionada, suficiente para comparar configurações, mas não uma correspondência pixel a pixel. Nos modos iOS e Ambas ela espelha seu deslocamento, raio, cor e opacidade; no modo Android ela simula a elevação, porque navegadores não têm o conceito de elevation. Sempre confirme o visual final em um dispositivo real ou emulador.
Quais intervalos de valores são aceitos?
Deslocamento X e Deslocamento Y vão de -100 a 100 px, Opacidade de 0 a 1 em passos de 0,01, Raio de 0 a 100 px e Elevação de 0 a 24. Entradas fora do intervalo são ajustadas ao valor válido mais próximo em vez de produzir código quebrado.
Minhas configurações são enviadas ou armazenadas?
Não. O código é gerado localmente nesta aba, nenhuma configuração de sombra é armazenada ou enviada a lugar nenhum, e nenhuma conta é necessária.
Quando devo escolher o novo modo boxShadow?
Use-o quando seu app usa a New Architecture do React Native e seu destino Android é 9 ou superior. Esse modo exporta uma única sombra externa sem elevation. Para configurações mais antigas, mantenha as propriedades de plataforma legadas. O raio de desfoque e o raio de sombra legado não são uma migração pixel a pixel idêntica; confira o estilo gerado no seu app nativo.

Continuar em Desenvolvimento

Tarefas relacionadas, não um beco sem saída.

Passe para outro espaço de trabalho focado sem voltar ao índice completo.

Código para imagem

Code to Image Converter

Exporte código com destaque de sintaxe como PNG ou SVG em seis linguagens, com temas claro e escuro, numeração, título e escala 1x ou 2x.

Criar

Gerador de slug de URL

URL Slug Generator

Transforme títulos em slugs de URL limpos com hífens ou sublinhados — acentos removidos, & expandido, escritas não latinas preservadas — ao vivo.

Criar

Codificador/decodificador Base64

Base64 Encoder/Decoder

Codifique texto Unicode em Base64 ou decodifique de volta com validação ao vivo, opções URL-safe e UTF-8 e botão de troca para ida e volta.

Converter

Codificador/decodificador HTML

HTML Encoder/Decoder

Escape os cinco caracteres que quebram marcação ou decodifique entidades nomeadas e numéricas de volta em texto, com ida e volta em um clique.

Converter