1
resposta

[Bug] fui fazer os componentes mas quando salvo o texto some, como posso resolver

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


export default function Texto ({ chinldren, style }) {
    return <Text style={[style, estilos.texto]}>{ chinldren }</Text>
}

const estilos = StyleSheet.create({
    texto: {
        fontFamily: "MontserratRegular"
    }
})

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

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

import Texto from '../componentes/Texto';

import topo from '../../assets/topo.png';
import logo from '../../assets/logo.png';

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

export default function Cesta() {
    return <>
    <Image source={topo} style={estilos.topo}/>
    <Text style={estilos.titulo}>Detalhe da Cesta</Text>

    <View style={estilos.cesta}>
    <Text style={estilos.nome}>Cesta de Verduras</Text>
    <View style={estilos.fazenda}>
       <Image source={logo} style={estilos.imagemFazenda}/>
       <Text style={estilos.nomeFazenda}>Jenny Jack Farm</Text>
    </View>
    <Texto style={estilos.descricao}>
        Uma cesta com produtos selecionados 
        cuidadosamente da fazenda direto para a 
        sua cozinha</Texto>
        <Text style={estilos.preco}>R$ 40,00</Text>
    </View>
    </>

}

const estilos = StyleSheet.create({
    topo: {
        width: "100%",
        height: 578 / 768 * width,
    },
    titulo: {
        width: "100%",
        position: "absolute",
        textAlign: "center",
        fontSize: 16,
        lineHeight:26,
        color:"white",
        fontWeight: "bold",
        padding: 16
    },
    cesta: {
        paddingVertical: 8,
        paddingHorizontal: 16
    },
    nome: {
        color: "#464646",
        fontSize: 26,
        lineHeight: 42,  
        fontFamily: "MontserratBold",
    },
    fazenda: {
        flexDirection: "row",
        paddingVertical: 12.
    },
    imagemFazenda:{
        width:32,
        height: 32   
    },
    nomeFazenda: {
       fontSize: 16,
       lineHeight: 26,
       marginLeft: 12,
       fontFamily: "MontserratRegular",
    },
    descricao: {
        color: "#A3A3A3",
        fontSize:16,
        lineHeight:26,
    },
    preco: {
        color: "#2A9F85",
        fontWeight: "bold",
        fontSize: 26,
        lineHeight: 42,
        marginTop: 8
    }
});
1 resposta

Oi Enrico, tudo bem?

Parece que você encontrou um pequeno erro de digitação em seu código. No componente Texto, você escreveu chinldren em vez de children. Isso está causando o problema de o texto não ser exibido. Você precisa corrigir essa palavra em todos os lugares em que está escrita errada.

Então, o seu código para o componente Texto deve ficar assim:

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

export default function Texto ({ children, style }) {
    return <Text style={[style, estilos.texto]}>{ children }</Text>
}

const estilos = StyleSheet.create({
    texto: {
        fontFamily: "MontserratRegular"
    }
})

Você pode ver que mudei chinldren para children na linha export default function Texto ({ children, style }). Isso deve resolver o problema e o texto deve aparecer normalmente agora.

Espero ter ajudado.

Um abraço e bons estudos.