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

    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
    }

// 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,
  },
});

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,
  },
});

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;

Comentarios (3)3 comentarios

Juanito Ortega Guzmán

Hace 5 años

Los estilos pegados en el min: 2:58

Lucio Negrello

Profesor

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!

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

Hace un año

Les dejo el código pero adaptado a Typescript:

Crea la vista de productos en la pantalla principal

Progreso del curso

Presentación

Preparando el proyecto

Creando tu app

Conclusiones