React Native 判断用户是否在屏幕顶部答案

【问题标题】：React native determine if user is at the top of the screenReact Native 判断用户是否在屏幕顶部
【发布时间】：2016-08-11 10:26:34
【问题描述】：

在 web 中的 javascript 中，我会做这样的事情来确定用户是否位于可滚动页面/文档的顶部：

$(document).scroll(function() { 
   if($(window).scrollTop() === 0) {
     //do stuff
   }
});

React Native 中是否有类似的东西可以帮助我确定用户是否位于屏幕顶部？

【问题讨论】：

标签： javascript react-native scrollview scrolltop

【解决方案1】：

使用ScrollView，您可以执行以下操作：

_handleScroll(event) {
    if(event.nativeEvent.contentOffset.y <= 0) {
        console.log('top!');
    }
}
render() {
    return (
        <View style={styles.container}>
            <ScrollView 
                onScroll={this._handleScroll}     
                onScrollAnimationEnd={this._handleScroll} 
                style={{flex: 1}}>
                    <View style={[styles.child, {backgroundColor: 'red'}]} />
                    <View style={[styles.child, {backgroundColor: 'orange'}]} />
                    <View style={[styles.child, {backgroundColor: 'green'}]} />
            </ScrollView>
        </View>
    );
}

var styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    child: {
        flex: 1,
        height: 400,
    }
});

希望对你有帮助！

【讨论】：

【解决方案2】：

是的 ScrollView 组件有 onScroll 方法。 pageX 和 pageY 属性 evt nativeEvent contentOffset x y

handleScroll(event) {
 console.log(event.nativeEvent.contentOffset.y)
},

<ScrollView onScroll={this.handleScroll}/>

【讨论】：

contentOffset.y 是正确的，pageY 是相对于屏幕大小而不是整个页面。 :)