Creé un objeto para poder mostrarlo en una lista plana, el objeto es el siguiente

    export const DISHES = [
  {
    id: 0,
    name: 'Uthappizza',
    image: 'images/uthappizza.png',
    category: 'mains',
    label: 'Hot',
    price: '4.99',
    featured: true,
    description:
      'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
  },
  {
    id: 1,
    name: 'Zucchipakoda',
    image: 'images/zucchipakoda.png',
    category: 'appetizer',
    label: '',
    price: '1.99',
    featured: false,
    description:
      'Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce',
  },];

Luego creé la lista plana y está funcionando tomando todas las propiedades del objeto como quiero, pero no pude entender cómo mostrar las imágenes correctamente, pero no muestra las imágenes

const Item = ({item, onPress, style}) => (
  <TouchableOpacity onPress={onPress}>
    <Card image={item.image}>
      <Text style={{textAlign: 'center', fontWeight: 'bold', fontSize: 20}}>
        {item.name}
      </Text>
      <Text style={{marginBottom: 10}}>{item.description}</Text>
    </Card>
  </TouchableOpacity>
);

function Menu() {
  const renderItem = ({item}) => {
    return <Item item={item} />;
  };

  return (
    <FlatList
      data={DISHES}
      renderItem={renderItem}
      keyExtractor={(item) => item.id.toString()}
    />
  );
} 
0
Yaman 7 ago. 2020 a las 20:48

2 respuestas

La mejor respuesta

Necesitas requerir la imagen dentro del propio objeto

    export const DISHES = [
{
    id: 0,
    name: 'Uthappizza',
    image: require('images/uthappizza.png'),
    category: 'mains',
    label: 'Hot',
    price: '4.99',
    featured: true,
    description:
      'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
  },
  {
    id: 1,
    name: 'Zucchipakoda',
    image: require('images/zucchipakoda.png'),
    category: 'appetizer',
    label: '',
    price: '1.99',
    featured: false,
    description:
      'Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce',
  },];
1
Eslam Adel 7 ago. 2020 a las 17:53

Tiene diferentes opciones para manejar este escenario Si sus datos son estáticos, simplemente puede requerir la imagen al inicializar la matriz

   image: require('images/zucchipakoda.png'),

Y configure la imagen directamente como lo ha hecho.

Si sus imágenes son dinámicas, puede almacenarlas en otro lugar y proporcionar el uri en lugar de ir con el requisito anterior.

Digamos que su imagen es estática y envía el nombre desde el servidor como "zucchipakoda", luego puede crear un objeto json como el siguiente

images:{
  zucchipakoda:require('images/zucchipakoda.png')
}

Y usar como a continuación

src={images['zucchipakoda']}

Depende de cómo planeas llevar adelante la aplicación y dónde vas a almacenar las imágenes.

1
Guruparan Giritharan 7 ago. 2020 a las 17:53