ReactNative ScollView 组件_onmomentumscrollbegin-CSDN博客

本文链接：https://blog.csdn.net/GL_MINE_CSDN/article/details/73648118

本文介绍了一个React Native中ScrollView组件的应用案例，演示了如何监听拖拽与滑动事件，并展示了如何添加刷新控件及子组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ReactNative ScollView 组件。

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ScrollView,
    RefreshControl,
} from 'react-native';

/**scrollView 的简单实现
 *scrollView 的简单实现
 *实现检测拖拽、滑动的先关方法
 *添加几个子组件
 */

let MyScrollView = React.createClass({
    _onScrollBeginDrag: function () {
        console.log("拖拽开始")
    },
    _onScrollEndDrag: function () {
        console.log("拖拽结束")
    },
    _onMomentumScrollBegin: function () {
        console.log("开始滑动")
    },
    _onMomentumScrollEnd: function () {
        console.log("滑动结束")
    },
    _onRefresh: function () {
        console.log("刷新")
    },
    render: function () {
        return (
            <View style={styles.container}>
                <ScrollView
                    showsVerticalScrollIndicator={true}
                    onScrollBeginDrag={this._onScrollBeginDrag}
                    onScrollEndDrag={this._onScrollEndDrag}
                    onMomentumScrollEnd={this._onMomentumScrollEnd}
                    onMomentumScrollBegin={this._onMomentumScrollBegin}
                    refreshControl={
                        <RefreshControl refreshing={false}
                                        tintColor="red"
                                        title="正在刷新"
                                        onRefresh={this._onRefresh()}
                        />
                    }
                    style={styles.scrollview}>
                    <View style={styles.view_1}></View>
                    <View style={styles.view_2}></View>
                    <View style={styles.view_3}></View>
                </ScrollView>
            </View>
        );
    }
});

let styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "cyan"
    },
    scrollView: {
        marginTop: 25,
        backgroundColor: "#CCC"
    },
    view_1: {
        margin: 15,
        flex: 1,
        height: 300,
        backgroundColor: 'yellow'
    },
    view_2: {
        margin: 15,
        flex: 1,
        height: 300,
        backgroundColor: 'blue'
    },
    view_3: {
        margin: 15,
        flex: 1,
        height: 300,
        backgroundColor: 'green'
    },

});
//导出组件 任意使用
module.exports = MyScrollView;