Eu estava acompanhando a aula quando eu fui implementar o listheadercomponent, não apareceu o componente do cabeçalho.
listHeaderComponent={() => {...}} não apareceu nada exceto a lista de fruta e consegui fazer aparece conforme abaixo listHeaderComponent={() => (...)} apareceu normalmente sem {}.
Fala, Gleicy! Tudo bem ?
Realmente utilizando essa estrutura que você descreveu também funciona, em que não utilizamos os colchetes (“{ }“), desse modo o return fica até implícito. Então ficaria a seguinte estrutura por exemplo:
<FlatList
data={texto.lista}
keyExtractor={item => item.id}
renderItem={({item}) => <Lista {...item} /> }
ListHeaderComponent={() => (
<>
<Text>Titulo dos Produtores</Text>
</>
)}
/>Mas, utilizando a estrutura com colchetes, que é listHeaderComponent={() => {...}} também funciona, mas nesse caso precisamos colocar o return para indicar o que será retornado. E um outro detalhe sobre esta estrutura é que se tiver uma quebra de linha depois do return deve ter um colchete entre os elementos que devem ser retornados. Então ficará da seguinte forma:
<FlatList
data={texto.lista}
keyExtractor={item => item.id}
renderItem={({item}) => <Lista {...item} /> }
ListHeaderComponent={() => {
return <>
<Text>Titulo dos Produtores</Text>
</>
}}
/>Dessa forma estamos retornando os elementos que devem aparecer na tela. Caso queiramos colocar uma quebra de linha depois do return, temos que colocar colchetes entre os elementos que devem ser retornados que virão abaixo, senão eles não irão aparecer na tela. Então ficará da seguinte forma:
<FlatList
data={texto.lista}
keyExtractor={item => item.id}
renderItem={({item}) => <Lista {...item} /> }
ListHeaderComponent={() => {
return(
<>
<Text>Titulo dos Produtores</Text>
</>
)
}}
/>Eu espero que tenha ajudado e qualquer coisa estou por aqui.
Abraço e bons estudos!