试图找到滚动的方向

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 更改为 object，onScroll将 onScroll 函数绑定并更改为 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

好吧，我找到了一种不使用 onscroll 属性的新方法（而且它的调用不多）。但是，请注意，这不应该用于使用滚动视图/平面列表对视图进行动画处理，因为它只检测用户何时停止滚动，并且可能会失败......

只需将其粘贴到您的平面列表/滚动视图中

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

如果您只需要在用户停止滚动后对某些内容进行动画处理（在我的例子中是搜索栏），那么很有用，因为我不希望它在用户向下滚动时进行动画处理，因为这会占用一些宝贵的空间

Answer 2

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 是一个对象。根据要求编辑的答案:)