1

Gente seguinte, eu tenho uma flat list no meu app React Native, aonde nela eu preciso usar uma "ref" para acessar o metodo "scrollToEnd()" dela, porem como estou usando hooks não consigo usar a ref.

Aqui tem um exemplo do que quero fazer:

export default function Test(){
 return( 
  <FlatList data={data}
   keyExtractor={id => String(id)}
   ref={ref.flatlist}
   onContentSizeChange={ref.flatlist.scrollToEnd()}
   renderItem={(item) => <Text>{item}</Text>
  />
 )
}

lembrando q o codigo acima eh so um exemplo, porém explica mais ou menos oque quero fazer. Alguém sabe como utilizar aquele ref nos hooks ou usar metodos dos componentes do react native no hook sem precisar desses refs? (o metodo scrollToEnd() eu peguei da documentaçao do FlatList)

1 Resposta 1

1

Para utilizar o ref em componentes funcionais você precisa utilizar o hook de ref (useRef). N documentação do React você encontra uma explicação sobre ele: https://pt-br.reactjs.org/docs/hooks-reference.html#useref Ele funciona da seguinte forma, você declara uma variável dentro do escopo do seu componente, que receberá o retorno do hook (um objeto mutável), em seguida, no componente que você querer referenciar, basta passar a variável que acabou de criar na prop "ref" dele. Segue um exemplo com o flatlist:

import React, {useRef} from 'react'; // importando o hook
export default function Test(){
const flatListRef = useRef(null); // declarando o hook e inicializando como null
 return( 
  <FlatList 
   ref={flatListRef} // aqui recebemos a ref da flatlist
   data={data}
   keyExtractor={id => String(id)}
   onContentSizeChange={flatListRef.scrollToEnd()} //aqui agora é possível acessar os metodos disponíveis do flatlist
   renderItem={(item) => <Text>{item}</Text>
  />
 )
}

Não me recordo agora se é preciso usar o current antes dos métodos do objeto referenciado (exemplo: flatListRef.current.scrollToEnd()), faça um teste. Todos os métodos do flatlist você pode encontrar também na doc do React Native: https://reactnative.dev/docs/flatlist

2
  • 1
    muito obrigado kkkk, eu comecei a usar com classes mesmo pq a resposta estava demorando dms mas fiz um teste aqui e realmente funcionou ent se eu precisar em outro lugar ja sei como fazer obrigado!
    – Elon Neto
    Commented 2/04/2020 às 19:30
  • De nada, boa sorte! Commented 2/04/2020 às 20:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .