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;
阅读全文
1 0
- ReactNative ScollView 组件
- ReactNative-Image组件
- ReactNative-Picker组件
- ReactNative-Switch开关组件
- ReactNative-WebView组件
- ReactNative开源组件
- ReactNative组件生命周期
- reactNative Navigator导航组件
- ReactNative-WebView组件
- ReactNative 图片列表组件
- ReactNative View 组件
- ReactNative Text 组件
- ReactNative Touchable 组件
- ReactNative TextInput 组件
- ReactNative Image 组件
- ReactNative ListView 组件
- ReactNative组件生命周期
- ReactNative 组件封装---Modal
- Android 中的内存泄漏
- spark sql加载parquet格式和json格式数据
- 十大无人机品牌介绍
- 环境搭建
- background-clip使用
- ReactNative ScollView 组件
- POJ1716 Integer Intervals(区间选点)
- [sicily]1000. 函数求值
- Myeclipse如何自动创建hibernate以及配置struts2以及数据库表创建映射文件 详解
- Module build failed: TypeError: this._init is not a function
- 最简单的基于FFMPEG的封装格式转换器(无编解码)
- 确定字符串第二个大写字母的位置并分拆
- Maven构建Spring Boot+Mybatis+derby的配置
- NotePad++访问linux文件