[Dúvida] Não imprimiu os textos | React Native com Expo: navegação com menu e suporte às telas

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/> }

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!