react native shadow 2
v7.1.1
Importante
¡El nuevo React Native 0.76 , lanzado el 23 de octubre de 2024 , finalmente admite una sombra multiplataforma!
Esta nueva característica debe preferirse a través de esta biblioteca.
¿Solo puedo apreciar de todo corazón el apoyo y la amabilidad de todos en los últimos 4 años y celebrar haber alcanzado 39K semanalmente y 2 m totales de descargas ?
Si está buscando un profesional apasionado con 5 años de experiencia en TypeScript, React y React Native, ¡contácteme en [email protected]!
React-Native-Shadow está muerto durante años. Esta es una versión mejorada con más funcionalidades, soporte mecanografiado y escrita desde cero. No es necesario definir su tamaño: la sombra se aplica de manera inteligente en el primer render y luego se vuelve a aplicar con precisión en los siguientes.
Resuelve el antiguo problema nativo de React de no tener la misma sombra y uso para Android, iOS y Web.
El sitio web EtherCeative/React-Native-Shadow-Generator no le dará resultados muy similares entre las dos plataformas, por las razones que describí aquí. Tampoco es tan personalizable como esta biblioteca.
Compatible con Android, iOS y Web. Y exposición!
Admite RTL.
¡Prueba esta biblioteca!
Se recomienda la última versión
react-native-svg, incluso si usa Expo.
npm i react-native-shadow-2
# or
yarn add react-native-shadow-2 import { Shadow } from 'react-native-shadow-2' ;
< Shadow >
< Text style = { { margin : 20 , fontSize : 20 } } > ? </ Text >
</ Shadow > 
< Shadow distance = { 15 } startColor = { '#eb9066d8' } endColor = { '#ff00ff10' } offset = { [ 3 , 4 ] } >
< View style = { { borderTopStartRadius : 24 , borderBottomEndRadius : 0 , borderRadius : 10 , backgroundColor : '#c454f0dd' } } >
< Text style = { { margin : 20 , fontSize : 20 } } > ? </ Text >
</ View >
</ Shadow > 
| Propiedad | Descripción | Tipo | Por defecto |
|---|---|---|---|
| startcolor | El color de gradiente inicial de la sombra. | string | '#00000020' |
| endcolor | El color de gradiente final de la sombra. | string | Startcolor transparente. Explicación. |
| distancia | Hasta dónde llega la sombra. | number | 10 |
| compensar | Mueve la sombra. Negativo x lo mueve a la izquierda/comienza, negativo y lo mueve hacia arriba.Acepta valores 'x%' .Definición de esto paintInside predeterminado a verdadero , ya que es el comportamiento deseado habitual. | [x: string | number, y: string | number] | [0, 0] |
| pintura | Aplique la sombra debajo/dentro del contenido. startColor se usa como color de relleno, sin un gradiente.Útil cuando se usa offset o si su hijo tiene cierta transparencia. | boolean | false , pero true si se define offset |
| lado | Los lados que tendrán sus sombras dibujadas. No incluye esquinas. Lados indefinidos Fallbacks to True . Explicación. | Record<'start' | 'end' | 'top' | 'bottom', boolean> | undefined |
| rincones | Las esquinas que tendrán sus sombras dibujadas. Corizas indefinidas Flacks a verdaderas . Explicación. | Record<'topStart' | 'topEnd' | 'bottomStart' | 'bottomEnd', boolean> | undefined |
| estilo | El estilo de la vista que envuelve a sus hijos. Lea las notas a continuación. | StyleProp<ViewStyle> | undefined |
| estilo de contenedor | El estilo de la vista que envuelve la sombra y sus hijos. Útil para los márgenes. | StyleProp<ViewStyle> | undefined |
| estirar | Haga de sus hijos Ocuppy todo el espacio horizontal disponible. Explicación. | boolean | false |
| seguidor | No usará el tamaño relativo y el posicionamiento en el primer render, sino en los siguientes renders con los tamaños exactos de la recaudación. Útil si se trata de radios mayores que los tamaños de los lados (como un círculo) para evitar artefactos visuales en el primer render. Si true , la sombra no aparecerá en el primer render. | boolean | false |
| desactivado | Deshabilita la sombra. Útil para reutilizar fácilmente los componentes, ya que a veces no se desean sombras.containerStyle y style todavía se aplican. | boolean | false |
Si la sombra tiene un solo hijo, obtendrá el width , height y todas las propiedades de borderRadius de la propiedad style de los niños, si se definen.
También puede definir esas propiedades en el style de la sombra. Las propiedades definidas aquí tendrán prioridad sobre las definidas en el style del niño.
Si el width y height se definen en cualquiera de esos, solo habrá un renderizado, ya que el primer tamaño automático no sucederá, solo el renderizado preciso.
Puede usar el 'borderTopLeftRadius' o 'borderTopStartRadius' y sus variaciones para definir los radios de las esquinas, aunque recomiendo este último, ya que es el estándar RTL.
Tener un radio mayor que su lado se meterá en la sombra si los tamaños no están definidos. Puede usar la propiedad safeRender para mostrar solo la sombra en el segundo renderizado y más allá, cuando tenemos el tamaño exacto del componente y los radios están correctamente limitados.
Los radios superiores a 2000 ( rounded-full de Tailwind es 9999) puede bloquear Android.
La opacidad se establece directamente en las propiedades startColor y endColor , en el canal alfa. Por ejemplo: '#0001' es un negro casi transparente. También puede usar '#rrggbbaa' , 'rgba()' , 'hsla()' etc. Todos los patrones en este enlace, pero no los colores int, se aceptan.
Use la propiedad o estilo stretch style={{alignSelf: 'stretch'}} en su componente de sombra. ¡Explicación!
Se exportó el tipo ShadowProps , los accesorios del componente de sombra. Puede hacer lo siguiente:
const ShadowPresets = {
button : {
offset : [ 0 , 1 ] , distance : 1 , startColor : '#0003' ,
} as ShadowProps ,
} ;
< Shadow { ... ShadowPresets . button } > offset y size están lanzando errores de mecanografiado!¡Actualice su mecanografiado a al menos 4.0.0! Esas dos propiedades usan tuplas etiquetadas . Si no usa TypeScript, esto no sucederá.
