Crea la vista de productos en la pantalla principal

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

Cursos Empresas Blog Live Conf Eventos Precios

0:0015:20

Crea la vista de productos en la pantalla principal

Curso de App Mobile utilizando Woocommerce

Clase 6 de 15

Clase 6 / 15

Juanito Ortega Guzmán

Hace 5 años

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

Profesor

Hace 5 años

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

Hace 5 años

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

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?

Crea la vista de productos en la pantalla principal

Progreso del curso

Presentación

Preparando el proyecto

Creando tu app

Conclusiones

Recursos

Recursos