3

如何知道用户滚动的方向是什么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。我错过了什么？

4

2 回答 2

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

于 2017-12-01T12:20:05.017 回答
5

好的，我找到了一种不使用 onscroll 属性的新方法（并且它没有被调用那么多）。但是，请注意，这不应该用于使用滚动视图/平面列表为视图设置动画，因为它仅检测用户何时停止滚动，并且可能会出现故障......

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

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

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

于 2019-01-25T16:25:02.597 回答