Los degradados resaltan un sabor colorido en nuestras aplicaciones. Por lo tanto, es importante saber cómo y cuándo usarlos en sus aplicaciones móviles. En React Native, los gradientes son extremadamente fáciles de integrar y en este artículo vamos a describir exactamente cómo implementarlos. Existen principalmente dos tipos de gradientes lineales en React Native y CSS: degradado lineal y radial
Dos de las bibliotecas JavaScript más utilizadas para generar gradientes en React Native son
expo-linear-gradient and react-native-linear-gradient
Ambos son muy similares y para este artículo sobre gradientes en React Native vamos a hacer uso de gradiente expo-lineal.
Instalación:
-
Para la expo:
expo install expo-linear-gradient -
Para proyectos desnudos:
a. Instalar y configurar unimódulos
b.expo install expo-linear-gradient
c. cd ios && pod install
El primer caso de uso de gradientes es hacer que los botones se vean sólidos:
import React from "react";
import { StyleSheet, Text, View, Button } from "react-native";
import { LinearGradient } from "expo-linear-gradient"; function GradientExampleOne() { return ( <View style={styles.container}> <LinearGradient colors={["#48F10E", "#078716", "#093203"]} style={styles.buttonContainer} > <Text style={styles.buttonText} > Login to read </Text> </LinearGradient> </View> );
} const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", alignItems: "center", justifyContent: "center", }, buttonContainer: { padding: 15, alignItems: "center", borderRadius: 5 }, buttonText: { fontWeight: "bold", fontSize: 18, color: "#fff", }
});
El accesorio de color acepta una variedad de colores que se mostrarán en un degradado lineal.
Hagamos otra cosa agradable con los degradados: combinaremos una imagen con un degradado, como en el siguiente ejemplo:
Ahora, ¿qué está pasando aquí? Estamos superponiendo un gradiente en un ImageBackground, un componente React Native y luego reducimos la opacidad del gradiente. Luego centramos nuestro texto dentro del _ Gradiente lineal _.
import React from "react";
import { StyleSheet, Text, View, ImageBackground } from "react-native";
import { LinearGradient } from "expo-linear-gradient"; function GradientExampleOne({ navigation }) { return ( <View style={styles.container}> <ImageBackground source={require('./assets/workspace.jpg')} style={styles.imgBackground}> <LinearGradient colors={["#09203f", "#537895"]} start={[0.1, 0.1]} style={styles.linearGradient} > <Text style={styles.text} >Linear Gradient Example</Text> </LinearGradient> </ImageBackground> </View> );
} const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", alignItems: "center", justifyContent: "center", }, imgBackground: { flex: 1, width: "100%", alignItems: "center", }, linearGradient: { width: '100%', height: '100%', opacity: 0.95, justifyContent: 'center', alignItems: 'center' }, text: { color: '#fff', fontSize: 40, fontWeight: 'bold', textAlign: 'center' }
});
Introduje un accesorio comienzo, el comienzo prop es una matriz para indicarle al gradiente dónde comenzar. El primer elemento posiciona el gradiente horizontalmente (eje x), mientras que el segundo elemento posiciona el gradiente verticalmente.
Por ejemplo,
[0.1, 0.2]significa que el gradiente comenzará un 10% desde la izquierda y un 20% desde la parte superior.
Veamos algunos ejemplos visuales:
Esto es lo que un gradiente con comienzo [0.9, 0.9] parece.
_ Gradiente lineal _ en React Native es fácil y fácil de implementar. Los hemos usado para que nuestros botones tengan un aspecto sólido. Hemos creado un fondo de interfaz de usuario nítido para nuestro texto y analizamos el accesorio de inicio.
Así es como puede implementar gradientes en React Native. Como puede ver, fue bastante sencillo.
Fuente: https://www.codementor.io/florianmarcu475/how-to-create-gradients-in-react-native-17banr5w5h
