Sombra de caja nativa de React

El tutorial de hoy demuestra cómo usar sombras de cuadro en una aplicación React Native para dispositivos Android e iOS.

Sombra de caja nativa de React

Las sombras de cuadro no siempre son fáciles de implementar en una aplicación React Native. Debido a que los desarrolladores deben diseñar para las plataformas Android e iOS, implementar sombras de cuadro uniformes con técnicas de implementación específicas de la plataforma puede llevar mucho tiempo.

Podemos utilizar cuatro propiedades de sombra de React Native para generar cuadros de sombra para dispositivos iOS.

1. El shadowColor define el color de la sombra del cuadro. Cabe destacar que este es el único ejemplo de shadowProp que funciona con dispositivos Android.
2. El accesorio shadowOffset permite objetos con parámetros de ancho y alto que tienen un valor numérico.
3. ShadowOpacity controla la transparencia de la sombra del cuadro. El valor de la propiedad varía de 0 a 1, donde 0 indica transparencia total y 1 representa opacidad completa.
4. El shadowRadius acepta un número entero como su valor para establecer el radio de desenfoque del componente. El desenfoque aumenta a medida que aumenta el valor, lo que hace que la sombra sea más amplia y clara. No se aceptan valores negativos para esta propiedad.

Pongamos estas propiedades a trabajar agregando una sombra de cuadro a un componente de tarjeta y haciendo lo siguiente:

Código de ejemplo:

import {StyleSheet, Text, View} from 'react-native';
import {Card} from 'react-native-paper';

export default function App() {
  return (
    <View style={[styles.card, styles.shadowProp]}>
      <View>
        <Text style={styles.heading}>React Native Box Shadow</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  heading: {
    fontSize: 18,
    fontWeight: "600",
    marginBottom: 13,
  },
  card: {
    backgroundColor: "red",
    borderRadius: 8,
    paddingVertical: 45,
    paddingHorizontal: 25,
    width: "20%",
    marginVertical: 10,
  },
  shadowProp: {
    shadowColor: "black",
    shadowOffset: { width: 2, height: 4 },
    shadowOpacity: 1,
    shadowRadius: 5,
  },
});

El código hace que la aplicación genere una tarjeta con una sombra de cuadro.

En Android, podemos crear sombras de cuadro utilizando el accesorio elevación, que utiliza la API Android Elevation. Da al objeto una sombra paralela y cambia el orden z para las vistas superpuestas.

Agreguemos una sombra de cuadro a un componente de tarjeta para ver cómo usarlo de esta manera. Primero, debemos tener en cuenta que el atributo styles.elevation solo funciona cuando se aplica a una parte <View>:

Código de ejemplo:

import {Card} from 'react-native-paper';

import {StyleSheet, Text, View} from './App/react-native';

export default function App() {
  return (<View style = {[styles.card, styles.elevation]}><View>
          <Text style = {styles.heading}>React Native Box
              Shadow</Text>
      </View>
          <Text>Using the elevation style prop</Text>
    </View>);
}

const styles = StyleSheet.create({
  heading: {
    fontSize: 18,
    fontWeight: '600',
    marginBottom: 13,
  },
  card: {
    backgroundColor: 'white',
    borderRadius: 8,
    paddingVertical: 45,
    paddingHorizontal: 25,
    width: '30%',
    marginVertical: 10,
    marginLeft: 50,
    marginTop: 50,
  },
  elevation: {
    elevation: 30,
    shadowColor: 'red',
  },
});

Conectamos el dispositivo Android para comprobar si el código funcionaba o no. Vea el siguiente resultado, y está funcionando como se esperaba:

No tenemos control sobre el radio de desenfoque, la opacidad o el desplazamiento de la sombra del cuadro; tenemos control sobre su color. Con base en la charla anterior, aprendimos cómo crear efectos de sombra en aplicaciones móviles React-Native.

Aprendimos sobre las muchas propiedades que admiten BoxShadow y BorderShadow. Agregamos un efecto de sombra al texto, el cuadro y el borde.

La sintaxis para crear un efecto de sombra en React-Native es relativamente sencilla. Entonces, con algunas secuencias de comandos, se puede crear una interfaz de usuario fantástica con un efecto de sombra. Este efecto se utiliza principalmente para seguir el movimiento y determinar los bordes de la superficie.