Entrar Ainda não tem acesso?
1
resposta

[Dúvida] Não imprimiu os textos

Referente ao curso React Native com Expo: navegação com menu e suporte às telas, no capítulo Primeira tela e atividade Listagem de serviços

por Alexandre
| 149.5k xp | 1 posts
import React from "react";
import {Text, StatusBar, FlatList} from 'react-native';

const servicos = [
    {
        id:1,
        nome:"Banho",
        preco:79.9,
        descricao: "Não de banho no seu gato!"
    },
    {
        id:2,
        nome:"Vacina V4",
        preco:89.9,
        descricao:"Uma dose da vacina V4. Seu gato precisa de duas"

    },
    {
        id:3,
        nome: "Vacina antirrábica",
        preco:99.9,
        descricao: "Uma dose da vacina antirrábica. Seu gato precisa de uma por ano!"
    }
]

export default function Servicos(){
    return
        <StatusBar>
            <Text>Serviços </Text>
            <FlatList
                data={servicos}
                renderItem={({item}) => {return <Text>{item.nome}</Text>}}
            />

        </StatusBar>
};
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import Servicos from './src/telas/servicos';

export default function App() {
  return
      <Servicos/>

}

Alguém pode me explicar o porque não está imprimindo nada nesse codigo?

1 resposta
por André Cunha
| 144.3k xp | 236 posts
Desenvolvedor Mobile

Olá, Alexandre, tudo bem?

Pelo que pude observar no seu código, há um pequeno erro de sintaxe que está impedindo que os textos sejam exibidos na tela. O problema está na função Servicos() que você criou.

Observe que você está fechando a declaração do retorno logo após o "return", antes mesmo de escrever o que deseja retornar. Isso faz com que a função retorne nada, ou seja, nenhum texto será exibido na tela. Para corrigir, basta mover a abertura da tag "StatusBar" para logo após o "return", como mostrado no código abaixo:

export default function Servicos(){
  return (
    <>
      <StatusBar />
      <Text>Serviços </Text>
      <FlatList
        data={servicos}
        renderItem={({item}) => {return <Text>{item.nome}</Text>}}
      />
    </>
  );
};

Note que também foi adicionada a tag "<>" para envolver os elementos que deseja retornar, já que há mais de um elemento. Além disso, foi adicionada a tag "" para definir a barra de status do aplicativo.

Espero que essa explicação tenha te ajudado a resolver o problema. Se ainda tiver dúvidas, não hesite em perguntar.

Bons estudos!