Как я могу вызвать прокрутку события scrollView вверх или вниз в React Native?

У меня есть элемент scrollView, и я хочу вызывать разные функции обратного вызова, если пользователь прокручивает вниз или вверх


person Eugene Kannou    schedule 05.11.2020    source источник


Ответы (1)


Вы можете использовать параметр onScroll, чтобы получать уведомления всякий раз, когда пользователь прокручивает страницу.

Чтобы добиться желаемого эффекта, вам просто нужно сохранить позицию, и если появится обновление, проверьте, изменится ли позиция y на положительное количество пикселей (вниз) или на отрицательное количество пикселей (вверх).

В качестве функционального компонента React это может выглядеть так:


function MyComponent() {
  // we use a ref here in order to store the value between rendering without triggering an update (like useState would)
  const scrollYRef = useRef(0)
  return (
    <ScrollView 
      onScroll={(event) => {
          // 0 means the top of the screen, 100 would be scrolled 100px down
          const currentYPosition = event.nativeEvent.contentOffset.y
          const oldPosition = scrollYRef.current

          if(oldPosition < currentYPosition) {
              // we scrolled down
          } else {
              // we scrolled up
          }
          // save the current position for the next onScroll event
          scrollYRef.current = currentYPosition
      }}
      ....
    />
  )
}

person Maddis    schedule 05.11.2020