Si haz tomado mi curso sobre Vue Native, o haz desarrollado en esta plataforma o la de React, sabes que nosotros solamente podemos enlazar estilos mediante JavaScript y NO con CSS, en otras palabras NO podemos establecer CSS o una hoja de estilos.
Para nosotros, los desarrolladores esto es algo molesto ya que nos ENCANTA tener nuestra hoja de estilo para tener una estructura clara de nuestro sitio; es más NO podemos emplear tecnologías como Bootstrap o Tailwind CSS en React o Vue Native.
En esta publicación, abordaré el problema de implementar un estilo global en una aplicación React Native.
Aquí hay tres formas de aplicar un estilo global a una aplicación React Native o Vue:
Método 1: Componentes personalizados
Dado que tanto Vue cómo React se basan en componentes, la forma más intuitiva es crear componentes personalizados (por ejemplo, campos de texto personalizados, botones personalizados, etc.), definir los estilos dentro de cada componente y reutilizar estos componentes en toda la aplicación.
Por ejemplo, para usar un color de fuente específico en toda la aplicación:
import React from 'react';
import { Text, StyleSheet } from 'react-native';
const BlueText = props => {
return(
<Text style={{ ...styles.blueText, ...props.style }}>{props.children}</Text>
);
};
const styles = StyleSheet.create({
blueText: {
color: 'blue'
}
});
export default BlueText;Método 2: hoja de estilo global
Podemos crear un archivo de ayuda GLOBAL a la app en donde definamos el estilo:
// https://github.com/libredesarrollo/vue-native-estilo-03/blob/main/helpers/style.js:
import { StyleSheet } from "react-native";
module.exports.style = StyleSheet.create({
container: {
width: "80%",
padding: 10,
borderWidth: 1,
borderColor: "gray",
borderRadius: 15,
marginLeft: "auto",
marginRight: "auto",
marginTop: 15,
},
h1: {
fontSize: 30,
marginBottom: 10,
},
h1: {
fontSize: 30,
marginBottom: 10
},
h2: {
fontSize: 25,
},
h3: {
fontSize: 18,
},
});Metodo 3: Hoja de estilo global
Por supuesto, puedes combinar varios estilos para UN solo componente:
<text :style="[style.h1, , { backgroundColor: bg }, {borderColor:'yellow'}, {borderWidth: 10 }]">Index</text>Con esto, nosotros podemos tener todo tipo de estilos y personalizar los mismos sutilmente de un componente a otro.
Extra: Estilo por componente en Vue Native
También podemos definir a nivel de componente, un estilo local al mismo:
<style>
.image {
width: 100%;
height: 200px;
border-radius: 5px;
margin-bottom: 10px;
}
</style>Esto viene siendo lo clásico, si empleas Vue, los 3 elementos de template, script y style lo puede seguir empleando, la unica diferencia es que el estilo es siempre LOCAL al componente.
Artículo recomendado
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter