Пытаясь найти направление прокрутки

Question

Как узнать, в каком направлении пользователь прокручивает ScrollView, Я хочу показать кнопку действия в зависимости от направления. Я пытаюсь найти направление с помощью следующего кода:

import React, {Component} from 'react'

import { StyleSheet, Alert, ScrollView, View, Text } from 'react-native' 

class ScrollDirection extends Component {
  constructor(props){
    super(props);
    this.state = {
      offset: 0
    }
  }

  onScroll(event){
    var currentOffset = event.nativeEvent.contentOffset.y;
    var direction = currentOffset > this.offset ? 'down' : 'up';
    this.state.offset = currentOffset;
    Alert.alert(direction);
  }


  render() {
    return (
      <View style={styles.container}>        
        <ScrollView onScroll={this.onScroll}>
          <View style={styles.scroller}>
           <Text style={{fontSize:20,}}>ScrollDirection</Text>
          </View> 
        </ScrollView>
      </View>
    )
  }

}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 50,
  },
  scroller: {
    height: 5000,
  },
});

export default ScrollDirection;

Поэтому при прокрутке вверх я хочу оповещать вверх, а при прокрутке вниз - вниз. Но я получаю следующую ошибку:

Что я делаю неправильно? Или есть ли лучший способ сделать это?

Большое спасибо!

Обновление 1:

Изменен state.offset на объект, связанный onScroll и изменил функцию on Scroll на setState:

constructor(props){
  super(props);
  this.state = {
    offset: {}
  }
  this.onScroll = this.onScroll.bind(this)
}

onScroll(event){
  var currentOffset = event.nativeEvent.contentOffset.y;
  var direction = currentOffset > this.state.offset ? 'down' : 'up';
  this.setState({
        offset : currentOffset.y
      }),
  Alert.alert(direction);
}

Но независимо от того, в каком направлении я прокручиваю, я получаю up, Что мне не хватает?

Answer 1

constructor(props){
 super(props);
 this.state = {
  offset: 0
 }
}

onScroll(event){
  var currentOffset = event.nativeEvent.contentOffset.y;
  var direction = currentOffset > this.offset ? 'down' : 'up';
  this.state.offset = currentOffset;
  Alert.alert(direction);
}

Это должно быть:

constructor(props){
  super(props);
  this.state = {
   offset: {}
  }
}

onScroll(event){
  var currentOffset = event.nativeEvent.contentOffset.y;
  var direction = currentOffset > this.state.offset ? 'down' : 'up';
  this.setState({
    offset : currentOffset
  }),
 Alert.alert(direction);

}

currentOffset является объектом. Ответ отредактирован согласно запросу:)

Answer 2

Хорошо, я нашел новый способ, который не использует свойство onscroll (и это не так часто). Тем не менее, имейте в виду, что это не должно использоваться для анимации представления с помощью scrollview / flatlist, так как он обнаруживает только, когда пользователь прекращает прокрутку, и может иметь свои сбои...

Просто вставьте это в свой плоский список

<Flatlist
...
onScrollBeginDrag={(event)=>{this.init=event.nativeEvent.contentOffset.y}}}
onScrollEndDrag={(event)=>{this.init<event.nativeEvent.contentOffset.y?alert('up'):alert('down')}}
.../>

Полезно, если вам нужно анимировать что-то только после того, как пользователь перестанет прокручивать, в моем случае, панель поиска, так как я не хочу, чтобы это анимировалось, пока пользователь прокручивает вниз, потому что это займет некоторое ценное пространство