react native fast shadow

? React-native-fast-shadow

Sombras de Android rápida e de alta qualidade para reagir nativo

Por que

O React Native suporta apenas sombras no Android através do suporte de elevação, mas alcançar o efeito desejado geralmente é impossível, pois vem apenas com muito poucas predefinições. As bibliotecas de terceiros foram criadas para contornar isso, mas quando usadas em muitas visualizações, elas podem tornar você mais lento ou aumentar significativamente seu consumo de memória.

Características

• ? ‍♀️ Fácil de usar: Substituição de entrega para o componente <View>
• ⚡️ Performant: as sombras podem ser aplicadas a um grande número de visualizações sem nenhum impacto significativo no desempenho. Foi otimizado para baixo consumo de memória e renderização rápida
• ? Customizable: suporta todos os adereços de sombra regulares, shadowRadius , shadowColor , shadowOpacity e shadowOffset
• Universal: funciona em todas as plataformas. No iOS e na web, <ShadowedView> é apenas um pseudônimo de <View>

Começando

npm install react-native-fast-shadow
# or
yarn add react-native-fast-shadow

Uso:

 import { ShadowedView } from 'react-native-fast-shadow' ;

< ShadowedView
  style = { {
    shadowOpacity : 0.4 ,
    shadowRadius : 12 ,
    shadowOffset : {
      width : 5 ,
      height : 3 ,
    } ,
  } }
>
  < Image source = { require ( './kitten.png' ) } style = { { borderRadius : 30 } } / >
< / ShadowedView > 

ShadowStyle ():

O utilitário shadowStyle() também pode ser usado para facilitar a criação de estilos de sombra e manter as sombras consistentes plataformas de Accross. Ele criará o mesmo suporte style que acima, mas dividirá o raio da sombra por 2 no iOS (como por alguns motivos, as sombras do iOS são muito grandes por um fator de 2 quando comparadas às ferramentas de design ou com a caixa de caixa do CSS):

 import { ShadowedView , shadowStyle } from 'react-native-fast-shadow' ;

< ShadowedView
  style = { shadowStyle ( {
    opacity : 0.4 ,
    radius : 12 ,
    offset : [ 5 , 3 ] ,
  } ) }
>
  < Image source = { require ( './kitten.png' ) } style = { { borderRadius : 30 } } / >
< / ShadowedView > 

Como funciona sob o capô

No Android, os Shadow Drawables são gerados com o seguinte processo (consulte ShadowFactory.java para obter mais detalhes):

1. A forma da vista (retângulo com cantos arredondados) é pintada de preto em uma tela
2. Um desfoque gaussiano é aplicado à tela com o shadowRadius dado usando a API renderizada
3. O desenhado é então convertido em um NinePatchDrawable para garantir que os cantos da sombra não sejam distorcidos quando a visualização for redimensionada. Dessa forma, podemos gerar apenas uma pequena sombra desenhada e reutilizá -la para todas as visualizações com a mesma borda e raios desfoque.
4. Finalmente, o desenhado é renderizado por trás do conteúdo da visualização: é matizado com shadowColor / shadowOpacity e compensado de acordo com shadowOffset

Como o NinePatchDrawable funciona (observe como os cantos não são estriados quando o traçado é redimensionado):

Solução de problemas

React-native-fast-shadow vem com as seguintes limitações:

• Funciona apenas com retângulos arredondados: ao contrário da implementação do iOS <View> , <ShadowedView> não funcionará com visualizações de forma livre. Ele espera que sua visão descendente direta seja um retângulo arredondado (até um círculo). Soluções: Para elementos <Text> sombreados, você pode usar o TextShadowRadius. Para formas complexas, o React-native-Androw é sua melhor opção.
• <ShadowedView> espera que sua visão da criança o preencha: cabe a você ter certeza de que <ShadowedView> e seus filhos tenham o mesmo tamanho, caso contrário, a sombra será maior que o conteúdo (você pode pensar <ShadowedView> com uma cor de fundo).
• Os raios de canto podem ser inferidos incorretamente: usamos o estilo <ShadowedView> ou o estilo de seu filho direto para inferir o Radii de canto para aplicar. Se a sua hierarquia de visualização for mais complexa, os raios de canto podem não ser inferidos corretamente. Solução: Rework Your View Hierarchy ou passe o borderRadius diretamente para o estilo style de <ShadowedView> .
• O raio de sombra é limitado a 25 ou menos: essa limitação vem do efeito desfoque do renderize. Solução: informe -nos se isso é um problema para você. Provavelmente, isso pode ser contabilizado ao reduzir o bitmap das sombras antes de aplicar o efeito desfoque.

Benchmark

A tabela a seguir compara o consumo de memória da react-native-fast-shadow , react-nativa e reagir-shadow-2 ao renderizar 100 150x200pt <Image> em um pixel 2 com uma sombra de raio de 12pt. O aplicativo foi construído usando a variante de depuração e Hermes.

Sem sombra	React-nativo-Shadow-2	React-nativo-Androw	React-native-fast-shadow
117 MB (REF)	430 MB (+313MB)	403MB (+286MB)	123MB (+6MB)