ReactNative ScollView 组件

来源:互联网 发布:国外网络支付平台 编辑:程序博客网 时间:2024/06/16 01:55

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;


原创粉丝点击