¿Cuáles son las diferentes formas de diseñar en un componente nativo de reacción?

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.

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.

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