1
resposta

Passei o Topo para function com Hooks

Para treinar fiz a mudança do Topo de Class para Function com Hooks, renderizou certinho. O código ficou assim, vejam se faltou algo:

import React, { useEffect, useState } from "react"
import logo from "../../../assets/logo.png"
import { carregaTopo } from "../../../servicos/carregaDados"
import { Image, StyleSheet, Text, View } from "react-native"

export default function Topo() {

    const [boasVindas, setBoasVindas] = useState("")
    const [legenda, setLegenda] = useState("")

    useEffect(() => {
        const retorno = carregaTopo()

        setBoasVindas(retorno.boasVindas)
        setLegenda(retorno.legenda)
    }, [])

    return <View style={estilos.topo}>
    <Image style={estilos.imagem} source={logo}/>
    <Text style={estilos.boasVindas}>{boasVindas}</Text>   
    <Text style={estilos.legenda}>{legenda}</Text>
    </View>
}

const estilos = StyleSheet.create({
    topo: {
        backgroundColor: "#f6f6f6",
        padding: 16,

    },
    imagem: {
        width: 70,
        height: 28,
    },
    boasVindas: {
        marginTop: 24,
        fontSize: 26,
        lineHeight: 42,
        fontWeight: "bold",
        color: "#464646"

    },
    legenda: {
        fontSize: 16,
        lineHeight: 26,
        color: "#a3a3a3"
    }
})

1 resposta

Oii Turi, tudo bem?

Pelo que você compartilhou, você fez a transição de um componente de classe para um componente funcional com Hooks corretamente. Seu código parece estar bem estruturado e não vejo nada faltando de imediato.

Parabéns pelo projeto!

Um abraço e bons estudos.

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