试图找到滚动的方向

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 并将 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

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/scrollview

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

如果您只需要在用户停止滚动后为某些内容设置动画，这很有用，在我的例子中，搜索栏，因为我不希望它在用户向下滚动时设置动画，因为这会占用一些有价值的东西 space

试图找到滚动的方向

Trying to find the direction of the scroll

reactjs

react-native

react-native-scrollview