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

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')}}
.../>

如果您只需要在用户停止滚动后对某些东西进行动画处理（在我的情况下为搜索栏），则很有用，因为我不希望用户向下滚动时对其进行动画处理，因为这会占用一些宝贵的空间

试图找到滚动的方向

2 个答案: