Stying en React Native no es lo mismo que CSS normal. Para diseñar elementos en React Native, se utilizan objetos de JavaScript. Cada componente central en React Native acepta el accesorio de estilo que acepta un objeto JavaScript que contiene nombres de propiedades CSS como clave. Cualquier propiedad CSS utilizada en estos objetos sigue la convención camel case, por ejemplo. backgroundColor se utiliza en lugar de background-color.
Creación de la aplicación ReactNative y la instalación del módulo:
-
Paso 1: Abra su terminal e instale expo-cli con el siguiente comando.
npm install -g expo-cli
-
Paso 2: ahora cree un proyecto con el siguiente comando.
expo init demo-app
-
Paso 3: ahora ve a la carpeta de tu proyecto, es decir, aplicación de demostración
cd demo-app
Estructura del proyecto: Tendrá el siguiente aspecto.
Enfoque 1: uso de estilos en línea: se prefiere usar estilos en línea solo para componentes pequeños, muy pequeños. Para aplicaciones de producción a gran escala, se vuelve engorroso e ineficiente usar estilos en línea.
App.js
import React from "react"; import { View, Image, Text, Button } from "react-native"; export default function App() { return ( <View style={{ height: 550, margin: 20, marginTop: 80, shadowColor: "#000", elevation: 5, borderRadius: 10, }}> <View style={{ width: "100%", height: "60%", borderTopLeftRadius: 10, borderTopRightRadius: 10, overflow: "hidden", }}> <Image style={{ width: "100%", height: "100%", }} source={{ uri: "https://media.geeksforgeeks.org/wp-content/uploads/20210709182202/download.jpeg", }} /> </View> <View style={{ alignItems: "center", height: "20%", padding: 10, }}> <Text style={{ fontSize: 18, marginVertical: 2, }}> Styling in React Native </Text> <Text style={{ fontSize: 14, color: "#888", }}> Using Inline Styles </Text> <Text style={{ fontSize: 14, textAlign: "justify", margin: 5, }}> Using inline styles is preferred only for small very small components. For large-scale production applications, it becomes cumbersome and inefficient to use inline styles. </Text> </View> <View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center", height: "20%", paddingHorizontal: 20, marginTop: 10, }}> <Button color="#006600" title="Understood!" /> <Button color="#006600" title="What?!!" /> </View> </View> ); }
Inicie el servidor utilizando el siguiente comando.
npm run android
Salida: si su emulador no se abrió automáticamente, debe hacerlo manualmente. Primero, vaya a su estudio de Android y ejecute el emulador. Ahora inicie el servidor de nuevo.
Enfoque 2: usar StyleSheet: a medida que un componente crece en complejidad, es mucho más limpio y eficiente usar StyleSheet.create para definir varios estilos en un solo lugar.
App.js
import React from "react"; import { View, Image, Text, Button, StyleSheet } from "react-native"; export default function App() { return ( <View style={styles.product}> <View style={styles.imageContainer}> <Image style={styles.image} source={{ uri: "https://media.geeksforgeeks.org/wp-content/uploads/20210709182202/download.jpeg", }} /> </View> <View style={styles.details}> <Text style={styles.title}>Styling in React Native</Text> <Text style={styles.subtitle}>Using StyleSheet</Text> <Text style={styles.description}> As a component grows in complexity, it is much cleaner and efficient to use StyleSheet.create so as to define several styles in one place. </Text> </View> <View style={styles.buttons}> <Button color="#006600" title="Understood!" /> <Button color="#006600" title="What?!!" /> </View> </View> ); } const styles = StyleSheet.create({ product: { height: 500, margin: 20, marginTop: 80, shadowColor: "#000", shadowOpacity: 0.26, shadowOffset: { width: 0, height: 2 }, shadowRadius: 8, elevation: 5, borderRadius: 10, backgroundColor: "#fff", }, imageContainer: { width: "100%", height: "60%", borderTopLeftRadius: 10, borderTopRightRadius: 10, overflow: "hidden", }, image: { width: "100%", height: "100%", }, details: { alignItems: "center", height: "20%", padding: 10, }, title: { fontSize: 18, marginVertical: 2, }, subtitle: { fontSize: 14, color: "#888", }, description: { fontSize: 14, textAlign: "justify", margin: 5, }, buttons: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", height: "20%", paddingHorizontal: 20, }, });
Inicie el servidor utilizando el siguiente comando.
npm run android
Salida: si su emulador no se abrió automáticamente, debe hacerlo manualmente. Primero, vaya a su estudio de Android y ejecute el emulador. Ahora inicie el servidor de nuevo.
Referencia: https://reactnative.dev/docs/stylesheet
Publicación traducida automáticamente
Artículo escrito por verma_anushka y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA