Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Moks de itens não são exibidos

Por algum motivo os moks itens lista não estão sendo exibidos em index

index.js

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

import Topo from "./componentes/Topo";
import Detalhes from "./componentes/Detalhes";
import Itens from "./componentes/Itens";


export default function Cesta({topo, detalhes, itens}){
    return <>
        <Topo {...topo}/>
        <View style={estilos.body}>
            <Detalhes {...detalhes}/>
            <Itens {...itens} />
        </View>
    </>
}

const estilos = StyleSheet.create({
    body:{
        paddingVertical: 8,
        paddingHorizontal: 16
    }
})

cesta.js

import imgLogo from '../assets/logo.png'
import tomate from '../assets/frutas/Tomate.png'
import brocolis from '../assets/frutas/Brócolis.png'
import batata from '../assets/frutas/Batata.png'
import pepino from '../assets/frutas/Pepino.png'
import abobora from '../assets/frutas/Abóbora.png'

const cesta = {
    topo: {
        titulo: "Detalhes da Cesta",
    },
    
    detalhes: {
        nome:"Cesta de Verduras",
        logo: imgLogo,
        nomeFazenda: "Jenny Jack Farm",
        descricao: "Uma cesta com produtos selecionados cuidadosamente da fazenda direto pra sua cozinha",
        preco: "R$ 40,00",
        botao: "Comprar"
    },

    itens: {
        titulo: "Itens da cesta",
        lista: [
            {
                nome: "Tomate",
                imagem: tomate
            },
            {
                nome: "Brócolis",
                imagem: brocolis
            },
            {
                nome: "Batata",
                imagem: batata
            },
            {
                nome: "Pepino",
                imagem: pepino
            },
            {
                nome: "Abóbora",
                imagem: abobora
            }
        ]
    }
}

export default cesta;

itens.js

import React from "react";
import Texto from "../../../componentes/Texto";

import { StyleSheet, Image } from "react-native";


export default function Itens ({titulo}){
    return <>
        <Texto>{titulo}</Texto>
    </>
}

const estilos = StyleSheet.create({
    containerItens:{
        paddingVertical: 12
    },
    
    tituloItens:{
        paddingVertical: 16,
        fontSize: 26,
        lineHeight: 42,
        fontWeight: "bold"
    }
})

Link do repositório https://github.com/WagProjects/App-em-React-Native

4 respostas

Olá, Wagner!

Tudo bem?

Olhando o seu código parece estar correto, você quer exibir o título. Verifica se o título está sendo apresentado na tela, pois não vai mudar nada, porque o título fixado é o mesmo do Mock: "Itens da cesta", então você deve tentar alterar o título no Mock, só como teste para ver se está alterando de fato na tela.

Espero ter ajudado. Qualquer dúvida manda aqui. Bons estudos!

Olá Renan, obrigado por ajudar.

Já fiz esses teste, na verdade fiz até com imagens. Tudo que vem do mock não funciona. Inicialmente achei que fosse erro no caminho das imagens, mas também não era.

Inserir o titulo e as imagens diretamente pelo arquivo 'itens.js' funciona normalmente, porém pelo mock não.

solução!

Isso acontece porque no arquivo "App.js" você está importando o "Mock" corretamente, mas não está passando o "Mock" completo para a "cesta", somente o "topo" e os "detalhes", veja, em momento algum você está passando o título por exemplo:

App.js:

<Cesta topo={mock.topo} detalhes={mock.detalhes}/>

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Era isso mesmo, muito obrigado !