1
resposta

Não entendi qual a relação do StatusBar com os componentes envoltos por um fragmento, poderia explicar um pouco mais?

Vi esta informação no vídeo aula sobre Imagem e Estilos (tópico 02 Componentes e estilos) do 11:29 ao 11min.34seg. Neste trecho é dito que o componente Image e Text (Cesta.js) são "irmãs" do componente StatusBar (App.js), pois ambos estão envoltos em um fragmento (que é como se fosse um empacotamento para retornar mais de uma TAG no return). Não entendi qual a relação destes dois componentes envoltos pelo fragmento com o StatusBar.

1 resposta

Fala, Helouíse! Tudo certo ?

Quando a instrutora fala que os componentes são irmãos, quer dizer que eles estão sendo retornados juntos na mesma camada, ou seja, eles não estão um dentro do outro, podemos imaginar como se eles estivessem lado a lado.

O react ele não entende quando estamos querendo retornar duas coisas separadas. Como no exemplo da aula:

return (
    <Image />
    <Text>Hello</Text>
)

O react não consegue entender nesse caso o que ele deve retornar e irá acusar um erro, mas uma coisa que ele permite fazer é colocar esses dois elementos que queremos retornar dentro de um único elemento e retornar esse único elemento. Nesse caso, poderíamos por exemplo criar uma View e retornar o conteúdo que queremos:

return (
        <View>
    <Image />
           <Text>Hello</Text>
        </View>
)

Nesse caso, iria funcionar sem problema, porque é dessa forma que o react funciona, devemos sempre ter um componente englobando todos os outros. Mas, pode notar que nós temos um elemento a mais agora que no caso a View, ou seja, temos mais uma camada.

No caso da aula, como o objetivo é apenas retornar os dois elementos, a instrutora faz uso de um recurso que temos no react que é o fragmento <></>, utilizamos o fragmento quando queremos agrupar elementos sem a necessidade de criar outra camada, ou seja, de criar um outro elemento externo .

Então, o exemplo da professora ficou o seguinte:

return (
        <>
          <Image />
          <Text>Hello</Text>
        </>
)

Dessa forma, quando a instrutora importar esse código acima em outro lugar, como no local onde fica o <StatusBar />, esses componentes vão ser irmãs do Statusbar porque ficarão todos na mesma camada. Portanto, é a mesma coisa que trocarmos a importação da <Cesta /> por:

return (
       <SafeAreaView>
        <StatusBar />
         <>
           <Image />
           <Text>Hello</Text>
        </>
</SafeAreaView>
)

Logo, não vamos ter um elemento dentro do outro, mas sim eles na mesma camada, que é o motivo da instrutora chamar de componentes irmãos.

Eu espero que tenha ajudado e qualquer coisa eu estou por aqui.

Abraço

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!