Crea la pantalla de detalles de productos

Clase 8 de 15 • Curso de App Mobile utilizando Woocommerce

José Eduardo Rendón Valencia

student•

Estilos ProducDetailScreen

const styles = StyleSheet.create({
  container: {
    height:
      Platform.OS === 'ios'
        ? Dimensions.get('window').height -
          sizes.headerHeight -
          sizes.ctaButton * 2 +
          10 -
          50
        : Dimensions.get('window').height -
          sizes.headerHeight -
          sizes.ctaButton * 2 +
          10,
  },
  imageContainer: {
    borderBottomStartRadius: 8,
    borderBottomEndRadius: 8,
    overflow: 'hidden',
  },
  itemImage: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').width,
  },
  textContainer: {
    padding: 16,
  },
  itemPrice: {
    color: colors.darkGrey,
    fontSize: 24,
    lineHeight: 24,
    fontWeight: '700',
    marginBottom: 8,
  },
  itemTitle: {
    color: colors.grey,
    fontSize: 20,
    lineHeight: 20,
    marginBottom: 16,
  },
  itemDescription: {
    color: colors.darkGrey,
    fontSize: 16,
  },
  buttonContainer: {
    height: sizes.ctaButton * 2,
    marginHorizontal: 8,
    padding: 8,
    borderRadius: 8,
  },
  buttonTextAdd: {
    color: colors.white,
    fontWeight: 'bold',
  },
  buttonAdd: {
    backgroundColor: colors.green,
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 12,
    paddingHorizontal: 32,
    borderRadius: 4,
  },
  buttonTextDelete: {
    color: colors.darkGrey,
    fontWeight: 'bold',
  },
  buttonDelete: {
    backgroundColor: colors.lightGrey,
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 12,
    paddingHorizontal: 32,
    borderRadius: 4,
  },
});

David Rangel

student•

¡Gracias, compañero!

David Rangel

student••

Les dejo una propuesta de cómo podría ser con Typescript:import { When } from 'react-if';

import { When } from 'react-if';
import { Image, Pressable, StyleSheet, View } from 'react-native';

import { HeaderProps } from '@/constants/types/HeaderTypes';
import { sizes } from '@/src/resources/constants';

export const Header = ({ route, navigation }: HeaderProps) =&gt; {
  const isProductScreen: boolean = route.name === 'Products';
  const handlePress = () =&gt; {
    navigation.goBack();
  };

  return (
    &lt;View style={styles.container}&gt;
      &lt;When condition={!isProductScreen}&gt;
        &lt;Pressable onPress={handlePress}&gt;
          &lt;Image
            style={styles.arrowIcon}
            source={{ uri: '@/assets//header/go-back-icon.png' }}
          /&gt;
        &lt;/Pressable&gt;
      &lt;/When&gt;
      &lt;Image style={styles.logo} source={{ uri: '@/assets/header/logo.png' }} /&gt;
      &lt;Image
        style={styles.cartBtn}
        source={{ uri: '@/assets/header/cart-icon.png' }}
      /&gt;
    &lt;/View&gt;
  );
};

const styles = StyleSheet.create({
  container: {
    height: sizes.headerHeight,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 8,
  },
  arrowIcon: {
    width: 25,
    height: 21,
  },
  logo: {
    width: 96,
    height: 17,
  },
  cartBtn: {
    width: 25,
    height: 25,
  },
});

David Rangel

student•

Les paso el regex con el ternario:

{route.description.replace(/<[^>]+>/g, '') || 'Lorem Lorem Lorem'}

const styles = StyleSheet.create({
  container: {
    height:
      Platform.OS === 'ios'
        ? Dimensions.get('window').height -
          sizes.headerHeight -
          sizes.ctaButton * 2 +
          10 -
          50
        : Dimensions.get('window').height -
          sizes.headerHeight -
          sizes.ctaButton * 2 +
          10,
  },
  imageContainer: {
    borderBottomStartRadius: 8,
    borderBottomEndRadius: 8,
    overflow: 'hidden',
  },
  itemImage: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').width,
  },
  textContainer: {
    padding: 16,
  },
  itemPrice: {
    color: colors.darkGrey,
    fontSize: 24,
    lineHeight: 24,
    fontWeight: '700',
    marginBottom: 8,
  },
  itemTitle: {
    color: colors.grey,
    fontSize: 20,
    lineHeight: 20,
    marginBottom: 16,
  },
  itemDescription: {
    color: colors.darkGrey,
    fontSize: 16,
  },
  buttonContainer: {
    height: sizes.ctaButton * 2,
    marginHorizontal: 8,
    padding: 8,
    borderRadius: 8,
  },
  buttonTextAdd: {
    color: colors.white,
    fontWeight: 'bold',
  },
  buttonAdd: {
    backgroundColor: colors.green,
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 12,
    paddingHorizontal: 32,
    borderRadius: 4,
  },
  buttonTextDelete: {
    color: colors.darkGrey,
    fontWeight: 'bold',
  },
  buttonDelete: {
    backgroundColor: colors.lightGrey,
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 12,
    paddingHorizontal: 32,
    borderRadius: 4,
  },
});

import { When } from 'react-if';
import { Image, Pressable, StyleSheet, View } from 'react-native';

import { HeaderProps } from '@/constants/types/HeaderTypes';
import { sizes } from '@/src/resources/constants';

export const Header = ({ route, navigation }: HeaderProps) =&gt; {
  const isProductScreen: boolean = route.name === 'Products';
  const handlePress = () =&gt; {
    navigation.goBack();
  };

  return (
    &lt;View style={styles.container}&gt;
      &lt;When condition={!isProductScreen}&gt;
        &lt;Pressable onPress={handlePress}&gt;
          &lt;Image
            style={styles.arrowIcon}
            source={{ uri: '@/assets//header/go-back-icon.png' }}
          /&gt;
        &lt;/Pressable&gt;
      &lt;/When&gt;
      &lt;Image style={styles.logo} source={{ uri: '@/assets/header/logo.png' }} /&gt;
      &lt;Image
        style={styles.cartBtn}
        source={{ uri: '@/assets/header/cart-icon.png' }}
      /&gt;
    &lt;/View&gt;
  );
};

const styles = StyleSheet.create({
  container: {
    height: sizes.headerHeight,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 8,
  },
  arrowIcon: {
    width: 25,
    height: 21,
  },
  logo: {
    width: 96,
    height: 17,
  },
  cartBtn: {
    width: 25,
    height: 25,
  },
});

Crea la pantalla de detalles de productos

Presentación

Bienvenida y presentación

Preparando el proyecto

Análisis del proyecto y conexión con la API de WooCommerce

¿Cómo puedo comenzar un proyecto con React Native?

Creando tu app

Planifica y crea el estado global de tu app

Crea la pantalla de productos

Crea la vista de productos en la pantalla principal

Aprende a crear la navegación de tu app

Crea la pantalla de detalles de productos

¿Cómo agregar el carrito a tu app?

Crea la vista de productos de tu carrito

Implementa cambios visuales basados en el carrito

Comprende cómo funcionan los payment gateways para tu app

Crea la pantalla de checkout

Guarda los pedidos de tu app

Conclusiones

¿Por dónde puedes seguir tu ruta?