Crea la vista de productos en la pantalla principal

Clase 6 de 15 • Curso de App Mobile utilizando Woocommerce

Contenido del curso

Presentación

1
Bienvenida y presentación
01:24 min

Preparando el proyecto

Creando tu app

Conclusiones

15
¿Por dónde puedes seguir tu ruta?
01:06 min

Tomar examen

Comentarios

Juanito Ortega Guzmán

student•

Los estilos pegados en el min: 2:58

    itemContainer: {
        width: Dimensions.get('window').width / 2,
        padding: 8,
        alignContent: 'center',
    },
    itemImage: {
        width: '100%',
        height: 160,
        borderRadius: 8,
        overflow: 'hidden',
        marginBottom: 4
    },
    itemData: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center'
    },
    itemMeta: {
        width: '70%'
    },
    itemTitle: {
        color: colors.darkGrey,
        fontWeight: '300'
    },
    itemPrice: {
        color: colors.darkGrey,
        fontWeight: 'bold'
    },
    itemBtn: {
        width: '25%'
    },
    productBtn: {
        width: 30,
        height: 30
    }

Juanito Ortega Guzmán

student•

Hola Lucio... al principio podía ver las imágenes de los productos pero cuando intenté continuar para ver el título y precio de cada producto, se me rompió todo, ahora no puedo ver nada, solo veo un screen vacío en el emulador.

En la consola... muy raro... me sale esto.

Estos son mis códigos en: ProductItem.js

import React from 'react';
import { StyleSheet, Dimensions, Text, View, Image } from 'react-native';

import { colors } from '../../resources/constants';
import config from '../../resources/config';

const ProductItem = props => {
    const { item } = props;
    const { id, name, price, images } = item;

    return (
        <View key={id} style={styles.itemContainer}>
            <Image
                resizeMode="cover"
                style={styles.itemImage}
                source={{
                    uri: images[0].src,
                    headers: {
                        Authorization: config.liveLinkCredentials
                    }
                }}
            />
            <View style={styles.itemData}>
                <View style={styles.itemMeta}>
                    <Text style={styles.itemPrice}>{`$ ${price}`}</Text>
                    <Text style={styles.itemTitle}>{name}</Text>
                </View>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    itemContainer: {
        width: Dimensions.get('window').width / 2,
        padding: 8,
        alignContent: 'center',
    },
    itemImage: {
        width: '100%',
        height: 160,
        borderRadius: 8,
        overflow: 'hidden',
        marginBottom: 4
    },
    itemData: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center'
    },
    itemMeta: {
        width: '70%'
    },
    itemTitle: {
        color: colors.darkGrey,
        fontWeight: '300'
    },
    itemPrice: {
        color: colors.darkGrey,
        fontWeight: 'bold'
    },
    itemBtn: {
        width: '25%'
    },
    productBtn: {
        width: 30,
        height: 30
    }
});

export default ProductItem;

ProductsScreen.js

import React, { useContext } from "react";
import { SafeAreaView } from "react-native-safe-area-context";
import { StyleSheet, Dimensions, Platform, Text, FlatList } from "react-native";
import ProductItem from "./ProductItem";

import Context from "../../context/Context";
import { sizes } from "../../resources/constants";

const ProductsScreen = props => {
    const { products } = useContext(Context);

    return (
        <SafeAreaView>
            <FlatList
                style={styles.container}
                data={products}
                renderItem={({item}) => <ProductItem item={item} {...props} />}
            />
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: {
        height:
            Platform.OS === 'ios'
                ? Dimensions.get('window').height - sizes.headerHeight - 30 - 50
                : Dimensions.get('window').height - sizes.headerHeight - 30
    }
});

export default ProductsScreen;

Saludos.

Lucio Negrello

teacher•

Hola Juanito, cómo estás? Por el error, entiendo que el problema no es con la maqueta, sino con el fetch a la API. Al parecer la promesa está devolviendo un archivo JSON inválido. Tendrías que revisar la función en la que se hace el fetch y que esté encendido el servidor para responder la petición. Espero que con esta info, puedas resolverlo. Saludos!

Juanito Ortega Guzmán

student•

Que raro, pude imprimir los name, luego pude imprimir las imágenes, pero cuando quise imprimir el precio y el name ya no pude y aunque probé revirtiendo estos últimos cambios, no pude volver a ver los name impresos. Por si acaso te dejo mi repo, podrías revisarlo por favor?... yo revisé, pero no encuentro el error, mis conocimientos son limitados. https://github.com/JuanitoOrtega/wp-react-native-store

David Rangel

student•

Les dejo el código pero adaptado a Typescript:

// constants/types/ProductTypes.ts

export type ImageType = {
  src: string;
};

export type ItemType = {
  id: string;
  name: string;
  price: number;
  images: ImageType[];
};

export interface ProductItemProps {
  item: ItemType;
}

// components/products/ProductsScreen.tsx

import { useContext } from 'react';
import { Dimensions, FlatList, Platform, StyleSheet } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

import { StoreContext } from '@/src/context/storeContext';
import { sizes } from '../../src/resources/constants';
import { ProductItem } from './ProductItem';

export const ProductsScreen = () => {
  const { products } = useContext(StoreContext);
  return (
    <SafeAreaView>
      <FlatList
        style={styles.container}
        data={products}
        renderItem={(item: any) => <ProductItem item={item} />}
        numColumns={2}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    height:
      Platform.OS === 'ios'
        ? Dimensions.get('window').height - sizes.headerHeight - 30 - 50
        : Dimensions.get('window').height - sizes.headerHeight - 30,
  },
});

// components/products/ProductItem.tsx

import { Dimensions, Image, StyleSheet, Text, View } from 'react-native';

import { ProductItemProps } from '@/constants/types/ProductTypes';
import { config } from '@/src/config/config';
import { colors } from '@/src/resources/constants';

export const ProductItem = ({ item }: ProductItemProps) => {
  const { id, name, price, images } = item;
  return (
    <View key={id} style={styles.itemContainer}>
      <Image
        resizeMode='cover'
        style={styles.itemImage}
        source={{
          uri: images[0].src,
          headers: {
            Authorization: config.liveLinkCredentials,
          },
        }}
      />
      <View style={styles.itemData}>
        <View style={styles.itemData}>
          <Text style={styles.itemPrice}>{`$ ${item.price}`}</Text>
          <Text style={styles.itemTitle}>{item.name}</Text>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  itemContainer: {
    width: Dimensions.get('window').width / 2,
    padding: 8,
    alignContent: 'center',
  },
  itemImage: {
    width: '100%',
    height: 160,
    borderRadius: 8,
    overflow: 'hidden',
    marginBottom: 4,
  },
  itemData: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  itemMeta: {
    width: '70%',
  },
  itemTitle: {
    color: colors.darkGrey,
    fontWeight: '300',
  },
  itemPrice: {
    color: colors.darkGrey,
    fontWeight: 'bold',
  },
  itemBtn: {
    width: '25%',
  },
  productBtn: {
    width: 30,
    height: 30,
  },
});

    itemContainer: {
        width: Dimensions.get('window').width / 2,
        padding: 8,
        alignContent: 'center',
    },
    itemImage: {
        width: '100%',
        height: 160,
        borderRadius: 8,
        overflow: 'hidden',
        marginBottom: 4
    },
    itemData: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center'
    },
    itemMeta: {
        width: '70%'
    },
    itemTitle: {
        color: colors.darkGrey,
        fontWeight: '300'
    },
    itemPrice: {
        color: colors.darkGrey,
        fontWeight: 'bold'
    },
    itemBtn: {
        width: '25%'
    },
    productBtn: {
        width: 30,
        height: 30
    }

import React from 'react';
import { StyleSheet, Dimensions, Text, View, Image } from 'react-native';

import { colors } from '../../resources/constants';
import config from '../../resources/config';

const ProductItem = props => {
    const { item } = props;
    const { id, name, price, images } = item;

    return (
        <View key={id} style={styles.itemContainer}>
            <Image
                resizeMode="cover"
                style={styles.itemImage}
                source={{
                    uri: images[0].src,
                    headers: {
                        Authorization: config.liveLinkCredentials
                    }
                }}
            />
            <View style={styles.itemData}>
                <View style={styles.itemMeta}>
                    <Text style={styles.itemPrice}>{`$ ${price}`}</Text>
                    <Text style={styles.itemTitle}>{name}</Text>
                </View>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    itemContainer: {
        width: Dimensions.get('window').width / 2,
        padding: 8,
        alignContent: 'center',
    },
    itemImage: {
        width: '100%',
        height: 160,
        borderRadius: 8,
        overflow: 'hidden',
        marginBottom: 4
    },
    itemData: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center'
    },
    itemMeta: {
        width: '70%'
    },
    itemTitle: {
        color: colors.darkGrey,
        fontWeight: '300'
    },
    itemPrice: {
        color: colors.darkGrey,
        fontWeight: 'bold'
    },
    itemBtn: {
        width: '25%'
    },
    productBtn: {
        width: 30,
        height: 30
    }
});

export default ProductItem;

import React, { useContext } from "react";
import { SafeAreaView } from "react-native-safe-area-context";
import { StyleSheet, Dimensions, Platform, Text, FlatList } from "react-native";
import ProductItem from "./ProductItem";

import Context from "../../context/Context";
import { sizes } from "../../resources/constants";

const ProductsScreen = props => {
    const { products } = useContext(Context);

    return (
        <SafeAreaView>
            <FlatList
                style={styles.container}
                data={products}
                renderItem={({item}) => <ProductItem item={item} {...props} />}
            />
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: {
        height:
            Platform.OS === 'ios'
                ? Dimensions.get('window').height - sizes.headerHeight - 30 - 50
                : Dimensions.get('window').height - sizes.headerHeight - 30
    }
});

export default ProductsScreen;

// constants/types/ProductTypes.ts

export type ImageType = {
  src: string;
};

export type ItemType = {
  id: string;
  name: string;
  price: number;
  images: ImageType[];
};

export interface ProductItemProps {
  item: ItemType;
}

// components/products/ProductsScreen.tsx

import { useContext } from 'react';
import { Dimensions, FlatList, Platform, StyleSheet } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

import { StoreContext } from '@/src/context/storeContext';
import { sizes } from '../../src/resources/constants';
import { ProductItem } from './ProductItem';

export const ProductsScreen = () => {
  const { products } = useContext(StoreContext);
  return (
    <SafeAreaView>
      <FlatList
        style={styles.container}
        data={products}
        renderItem={(item: any) => <ProductItem item={item} />}
        numColumns={2}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    height:
      Platform.OS === 'ios'
        ? Dimensions.get('window').height - sizes.headerHeight - 30 - 50
        : Dimensions.get('window').height - sizes.headerHeight - 30,
  },
});

// components/products/ProductItem.tsx

import { Dimensions, Image, StyleSheet, Text, View } from 'react-native';

import { ProductItemProps } from '@/constants/types/ProductTypes';
import { config } from '@/src/config/config';
import { colors } from '@/src/resources/constants';

export const ProductItem = ({ item }: ProductItemProps) => {
  const { id, name, price, images } = item;
  return (
    <View key={id} style={styles.itemContainer}>
      <Image
        resizeMode='cover'
        style={styles.itemImage}
        source={{
          uri: images[0].src,
          headers: {
            Authorization: config.liveLinkCredentials,
          },
        }}
      />
      <View style={styles.itemData}>
        <View style={styles.itemData}>
          <Text style={styles.itemPrice}>{`$ ${item.price}`}</Text>
          <Text style={styles.itemTitle}>{item.name}</Text>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  itemContainer: {
    width: Dimensions.get('window').width / 2,
    padding: 8,
    alignContent: 'center',
  },
  itemImage: {
    width: '100%',
    height: 160,
    borderRadius: 8,
    overflow: 'hidden',
    marginBottom: 4,
  },
  itemData: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  itemMeta: {
    width: '70%',
  },
  itemTitle: {
    color: colors.darkGrey,
    fontWeight: '300',
  },
  itemPrice: {
    color: colors.darkGrey,
    fontWeight: 'bold',
  },
  itemBtn: {
    width: '25%',
  },
  productBtn: {
    width: 30,
    height: 30,
  },
});

Crea la vista de productos en la pantalla principal

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?