Obtenha a posição de rolagem atual de ScrollView no React Native

É possível obter a posição de rolagem atual ou a página atual de um <ScrollView>componente no React Native?

Então, algo como:

<ScrollView
  horizontal={true}
  pagingEnabled={true}
  onScrollAnimationEnd={() => { 
      // get this scrollview's current page or x/y scroll position
  }}>
  this.state.data.map(function(e, i) { 
      <ImageCt key={i}></ImageCt> 
  })
</ScrollView>

Experimentar.

<ScrollView onScroll={this.handleScroll} />

E depois:

handleScroll: function(event: Object) {
 console.log(event.nativeEvent.contentOffset.y);
},

Isenção de responsabilidade: o que se segue é principalmente o resultado de minhas próprias experiências no React Native 0.50. A ScrollViewdocumentação está faltando muitas das informações cobertas abaixo; por exemplo, onScrollEndDragé completamente indocumentado. Como tudo aqui depende de comportamento não documentado, infelizmente não posso prometer que essa informação permanecerá correta daqui a um ano ou até um mês.

Além disso, tudo a seguir assume uma visualização de rolagem puramente vertical, em cujo deslocamento y estamos interessados; traduzir para x offsets, se necessário, é um exercício fácil para o leitor.

Vários manipuladores de eventos em um ScrollViewassumir um evente deixá-lo começar a posição de rolagem atual via event.nativeEvent.contentOffset.y. Alguns desses manipuladores têm um comportamento ligeiramente diferente entre Android e iOS, conforme detalhado abaixo.

onScroll

No Android

Dispara cada quadro enquanto o usuário está rolando, em cada quadro enquanto a visualização de rolagem está deslizando depois que o usuário a libera, no quadro final quando a visualização de rolagem pára e também sempre que o deslocamento da visualização de rolagem muda como resultado de seu quadro mudança (por exemplo, devido à rotação de paisagem para retrato).

No iOS

Dispara enquanto o usuário está arrastando ou enquanto a visualização de rolagem está deslizando, em alguma frequência determinada por scrollEventThrottlee no máximo uma vez por quadro quando scrollEventThrottle={16}. Se o usuário liberar a visualização de rolagem enquanto ela tem impulso suficiente para deslizar, o onScrollmanipulador também disparará quando chegar ao repouso após deslizar. No entanto, se o usuário arrasta e, em seguida, libera a exibição de rolagem enquanto ele está parado, onScrollé não garantido para o fogo para a posição final, a menos que scrollEventThrottletenha sido definida de tal forma que onScrollincêndios cada quadro de rolagem.

Há um custo de desempenho na configuração scrollEventThrottle={16}que pode ser reduzido configurando-o para um número maior. No entanto, isso significa que onScrollnão disparará todos os quadros.

onMomentumScrollEnd

Dispara quando a visualização de rolagem para após deslizar. Não dispara se o usuário liberar a visualização de rolagem enquanto ela estiver parada de forma que não deslize.

onScrollEndDrag

Dispara quando o usuário para de arrastar a visualização de rolagem - independentemente de a visualização de rolagem ficar parada ou começar a deslizar.

Dadas essas diferenças de comportamento, a melhor maneira de controlar o deslocamento depende de suas circunstâncias precisas. No caso mais complicado (você precisa suportar Android e iOS, incluindo manipulação de mudanças no ScrollViewquadro de devido à rotação, e você não quer aceitar a penalidade de desempenho no Android da configuração scrollEventThrottlepara 16), e você precisa lidar com muda para o conteúdo na visualização de rolagem também, então é uma bagunça certa.

O caso mais simples é se você só precisa lidar com o Android; apenas use onScroll:

<ScrollView
  onScroll={event => { 
    this.yOffset = event.nativeEvent.contentOffset.y
  }}
>

Para oferecer suporte adicional ao iOS, se você estiver feliz em disparar o onScrollmanipulador em todos os quadros e aceitar as implicações de desempenho disso, e se não precisar lidar com mudanças de quadro, então é apenas um pouco mais complicado:

<ScrollView
  onScroll={event => { 
    this.yOffset = event.nativeEvent.contentOffset.y
  }}
  scrollEventThrottle={16}
>

Para reduzir a sobrecarga de desempenho no iOS e, ao mesmo tempo, garantir que registremos qualquer posição em que a visualização de rolagem se estabelece, podemos aumentar scrollEventThrottlee fornecer adicionalmente um onScrollEndDragmanipulador:

<ScrollView
  onScroll={event => { 
    this.yOffset = event.nativeEvent.contentOffset.y
  }}
  onScrollEndDrag={event => { 
    this.yOffset = event.nativeEvent.contentOffset.y
  }}
  scrollEventThrottle={160}
>

Mas se quisermos lidar com mudanças de quadro (por exemplo, porque permitimos que o dispositivo seja girado, mudando a altura disponível para o quadro da visualização de rolagem) e / ou mudanças de conteúdo, devemos implementar adicionalmente ambos onContentSizeChangee onLayoutmanter o controle da altura de ambos o quadro da visualização de rolagem e seu conteúdo e, assim, calcular continuamente o deslocamento máximo possível e inferir quando o deslocamento foi reduzido automaticamente devido a uma alteração no tamanho do quadro ou do conteúdo:

<ScrollView
  onLayout={event => {
    this.frameHeight = event.nativeEvent.layout.height;
    const maxOffset = this.contentHeight - this.frameHeight;
    if (maxOffset < this.yOffset) {
      this.yOffset = maxOffset;
    }
  }}
  onContentSizeChange={(contentWidth, contentHeight) => {
    this.contentHeight = contentHeight;
    const maxOffset = this.contentHeight - this.frameHeight;
    if (maxOffset < this.yOffset) {
      this.yOffset = maxOffset;
    }
  }}
  onScroll={event => { 
    this.yOffset = event.nativeEvent.contentOffset.y;
  }}
  onScrollEndDrag={event => { 
    this.yOffset = event.nativeEvent.contentOffset.y;
  }}
  scrollEventThrottle={160}
>

Sim, é horrível. Também não estou 100% certo de que sempre funcionará bem nos casos em que você alterar simultaneamente o tamanho do quadro e o conteúdo da visualização de rolagem. Mas é o melhor que posso inventar e, até que esse recurso seja adicionado ao próprio framework , acho que é o melhor que alguém pode fazer.

A resposta de Brad Oyler está correta. Mas você receberá apenas um evento. Se você precisa obter atualizações constantes da posição de rolagem, você deve definir o scrollEventThrottlesuporte, assim:

<ScrollView onScroll={this.handleScroll} scrollEventThrottle={16} >
  <Text>
    Be like water my friend …
  </Text>
</ScrollView>

E o manipulador de eventos:

handleScroll: function(event: Object) {
  console.log(event.nativeEvent.contentOffset.y);
},

Esteja ciente de que você pode ter problemas de desempenho. Ajuste o acelerador de acordo. 16 oferece mais atualizações. 0 apenas um.

Se você deseja simplesmente obter a posição atual (por exemplo, quando algum botão é pressionado) em vez de rastreá-la sempre que o usuário rolar a tela, invocar um onScrollouvinte causará problemas de desempenho. Atualmente, a maneira com melhor desempenho de simplesmente obter a posição de rolagem atual é usando o pacote react-native-invoke . Existe um exemplo para isso exatamente, mas o pacote faz várias outras coisas.

Leia sobre isso aqui. https://medium.com/@talkol/invoke-any-native-api-directly-from-pure-javascript-in-react-native-1fb6afcdf57d#.68ls1sopd

Para obter x / y depois que a rolagem terminou como as perguntas originais solicitavam, a maneira mais fácil é provavelmente esta:

<ScrollView
   horizontal={true}
   pagingEnabled={true}
   onMomentumScrollEnd={(event) => { 
      // scroll animation ended
      console.log(e.nativeEvent.contentOffset.x);
      console.log(e.nativeEvent.contentOffset.y);
   }}>
   ...content
</ScrollView>

As respostas acima informam como obter a posição usando diferentes APIs onScroll, onMomentumScrollEndetc; Se você quiser saber o índice da página, pode calculá-lo usando o valor de deslocamento.

 <ScrollView 
    pagingEnabled={true}
    onMomentumScrollEnd={this._onMomentumScrollEnd}>
    {pages}
 </ScrollView> 

  _onMomentumScrollEnd = ({ nativeEvent }: any) => {
   // the current offset, {x: number, y: number} 
   const position = nativeEvent.contentOffset; 
   // page index 
   const index = Math.round(nativeEvent.contentOffset.x / PAGE_WIDTH);

   if (index !== this.state.currentIndex) {
     // onPageDidChanged
   }
 };

No iOS, a relação entre ScrollView e a região visível é a seguinte:

ref: https://www.objc.io/issues/3-views/scroll-view/

Foi assim que acabou obtendo a posição de rolagem atual ao vivo da visualização. Tudo o que estou fazendo é usar o ouvinte de evento on scroll e o scrollEventThrottle. Em seguida, estou passando-o como um evento para lidar com a função de rolagem que fiz e atualizando meus adereços.

 export default class Anim extends React.Component {
          constructor(props) {
             super(props);
             this.state = {
               yPos: 0,
             };
           }

        handleScroll(event){
            this.setState({
              yPos : event.nativeEvent.contentOffset.y,
            })
        }

        render() {
            return (
          <ScrollView onScroll={this.handleScroll.bind(this)} scrollEventThrottle={16} />
    )
    }
    }

o uso de onScroll entra em um loop infinito. onMomentumScrollEnd ou onScrollEndDrag pode ser usado no lugar

Quanto à página, estou trabalhando em um componente de ordem superior que usa basicamente os métodos acima para fazer exatamente isso. Na verdade, leva um pouco de tempo quando você chega às sutilezas, como layout inicial e alterações de conteúdo. Não alegarei ter feito isso 'corretamente', mas de certa forma consideraria a resposta correta usar um componente que faça isso de forma cuidadosa e consistente.

Veja: react-native-paged-scroll-view . Adoraria receber feedback, mesmo que eu tenha feito tudo errado!

Acredito contentOffsetque dará a você um objeto contendo o deslocamento de rolagem superior esquerdo:

http://facebook.github.io/react-native/docs/scrollview.html#contentoffset