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