2
respostas

Error: Text strings must be rendered within a <Text> component.

Olá a todos, será que alguém consegue me ajudar nesse erro, já importei o componete/texto.js para utilizar no lugar de <Text>, e revisei também todos os códigos, e todos estou utilizando o <Texto>, mas o erro persiste, e como se estivesse usando em algum local do tipo; Titulo ou parágrafo do projeto <Text> e não importado o mesmo.

Desde já agradeço!

2 respostas

Olá Aleir, tudo bem?

Entendo que está enfrentando um problema com o componente Text no React Native. Esse erro geralmente ocorre quando você tenta renderizar uma string de texto fora de um componente .

Vamos tentar resolver isso juntos. Primeiro, é importante garantir que todos os textos do seu código estejam dentro do componente , já que você mencionou que importou esse componente e está tentando usá-lo em vez do padrão.

Por exemplo, se você tem algo assim no seu código:

<View>
  Olá, Mundo!
</View>

Deveria ser alterado para:

<View>
  <Texto>Olá, Mundo!</Texto>
</View>

Outro ponto a ser observado é que, se você estiver usando algum componente de terceiros que internamente usa o do React Native, isso também pode causar o erro. Nesse caso, você pode precisar procurar uma alternativa para esse componente ou tentar corrigir o problema dentro do componente de terceiros.

Além disso, verifique se o seu componente está corretamente definido e exportado. Ele deve ser algo assim:

import React from 'react';
import { Text } from 'react-native';

export default function Texto({ children }) {
  return <Text>{children}</Text>;
}

E por último, certifique-se de que está importando corretamente o componente em todos os arquivos que o utilizam. Deve ser algo parecido com isso:

import Texto from './caminho/para/o/arquivo/Texto';

Espero que essas sugestões possam ajudá-lo a resolver o problema. Lembre-se, a programação é feita de tentativa e erro, então não desanime!

Espero ter ajudado e bons estudos!

Boa noite Matheus, primeiramente obrigado pela atenção,

Então..., revisei todo o meu código conforme as suas dicas,

1-Verifiquei e todos os textos(strings) estão dentro dos componentes.

import React from "react";
import logo from '../../../../assets/logo.png'
import Texto from '../../../componentes/texto'
import { Image,View, StyleSheet, Text } from "react-native";


export default  function Detalhes (){
    return <>
        <Texto style={estilos.nome}>Cesta de Verduras</Texto>
        <View style={estilos.linha}>
            <Image style={estilos.imagemFazenda} source={logo}></Image>
            <Texto style={estilos.fazenda}>Jenny Jack Farm</Texto>

        </View>
        
        <Texto style={estilos.descricao}>Uma cesta de prudutos 
            selecionados cuidadosamente da 
            fazenda direto para a sua cozinha</Texto>
        <Text style={estilos.preco}>R$ 40,00</Text>    
    </>
import React from "react";
import {StyleSheet, Image, Dimensions } from "react-native";
import topo from '../../../../assets/topo.png';
import Texto from '../../../componentes/texto';


const width =Dimensions.get ('screen').width; 

export default  function Topo () {
    return <>
        <Image source = {topo} style={estilos.topo}/>
        <Texto style={estilos.titulo}>Detalhe da cesta</Texto>
    </>
}
import React from "react";
import {StyleSheet, View } from "react-native";
import Detalhes from '../Cesta/componentes/Detalhes';
import Topo from '../Cesta/componentes/topo';



export default  function Cesta () {
   return <>
     <Topo />
     <View style={estilos.principal}> </View>
     <Detalhes/>
    </>  
}

2-O componente que estou usando não e de terceiro, foi eu que criei em aula, segue código do mesmo.

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

export default function Texto ({children, style}){
    let estilo= estilos.texto;
    if (style.fontWeight === "bold"){
        estilo = estilos.textoNegrito;
    }

    return <Text style = {[style , estilo]}>{children} </Text>
}

const estilos = StyleSheet.create ({
    texto:{
        fontFamily: "fontNormal",
        fontWeight: "normal",
    },
    textoNegrito:{
        fontFamily: "fontForte",
        fontWeight: "normal",
    }
})

3- Verifiquei e importei o componente em todos o códigos que utilizei ele, nos códigos acima da para verificar.

Se conseguir analisar meus códigos ficarei muito grato. Obrigado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software