cevap

16

Bir scrollview ait onScroll olayını kullanmak ve olay geri aramasında contentOffset kontrol edebilirsiniz:

https://rnplay.org/apps/FltwOg

'use strict'; 

var React = require('react-native'); 
var { 
    AppRegistry, 
    StyleSheet, 
    ScrollView, 
    Text, 
    View, 
} = React; 

var SampleApp = React.createClass({ 
    offset: 0, 
    onScroll: function(event) { 
    var currentOffset = event.nativeEvent.contentOffset.y; 
     var direction = currentOffset > this.offset ? 'down' : 'up'; 
    this.offset = currentOffset; 
    console.log(direction); 
    }, 
    render: function() { 
    return (
     <View style={styles.container}> 
     <ScrollView style={styles.scroller} onScroll={this.onScroll}> 
      <Text>Scrollable content here</Text> 
     </ScrollView> 
     </View> 
    ) 
    } 
}); 

var styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    marginTop: 50, 
    }, 
    scroller: { 
    height: 5000, 
    }, 
}); 

AppRegistry.registerComponent('SampleApp',() => SampleApp); 
+0

Yup, sadece farkedilmişScroll, sentetik olayları döndürür :) Kodu buraya eklerseniz (rnplay aşağı gider mi?) Bunu bir kez kabul edeceğim – Secret

3
Ben doğru yönünü belirtmek için AlexP çözümü ile ilgili sorunlar vardı

zaman arasındaki fark eski ve yeni ofset çok küçüktü. Bu yüzden onları filtreledim.

_onScroll = event => { 
    const currentOffset = event.nativeEvent.contentOffset.y; 
    const dif = currentOffset - (this.offset || 0); 

    if (Math.abs(dif) < 3) { 
     console.log('unclear'); 
    } else if (dif < 0) { 
     console.log('up'); 
    } else { 
     console.log('down'); 
    } 

    this.offset = currentOffset; 
    }; 
İlgili konular