RN组件之ScrollView
一.ScrollView
该组件封装了Android平台的ScrollView(滚动组件),并且提供触摸事件"responder"系统功能.使用ScrollView的时候
确保有一个固定的高度,因为这个控件其实就是把很多不固定高度的子控件装入到固定的父容器中(通过滑动交互).
如果我们要给ScrollView进行设置高度的话,要么我们直接ScrollView进行设置高度(不建议).另一种方法就是给
ScrollView的父控件设置相关高度.使用第二种方法ScrollView中是不能加{fLex:1},不然不会有效果的.
1.属性方法(通用和Android的)
(1)View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式)
(2)contentContainerStyle:样式风格属性(传入StyleSheet创建的Style文件).该样式会作用于被ScrollView
包裹的所有子视图
(3)horizontal(bool):表示ScrollView是横向滑动还是纵向滑动.默认false表示纵向滑动
(4)keyboardDismissMode(enum):('none','interactive','on-drag')
none(默认值):拖拽时不隐藏软键盘
on-drag:当拖拽开始的时候隐藏键盘
interactive:软键盘伴随拖拽操作同步地消失,并且如果往上滑动会恢复键盘.安卓设备不支持这个选项,
会表现的和none一样.
(5)keyboardShouldPersiitTaps(bool):当此属性为false的时候,在软键盘激活之后,点击焦点文本框以外的
地方,键盘就会隐藏.如果为true,滚动视图不会响应点击操作,并且键盘不会自动消失.默认值为false.
(6)onScroll(function):在滚动的过程中,每帧最多调用一次回调函数.调用的频率可以用
scrollEventThrottle属性来控制
(7)refreshControl (element):指定RefershControl,用于为ScrollView提供下拉刷新功能.
(8)removeClippedSubviews(bool):(实验特性):当此属性为true时,屏幕之外的子视图(子视图的overflow
样式需要设为hidden)会被移除.这个可以提升大列表的滚动性能.默认值为true.
(9)showsHorizontalScollIndicator(bool):当此属性为true的时候,显示一个水平方向的滚动条
(10)showsVerticalScrollIndicator(bool):当此属性为true的时候,显示一个垂直方向的滚动条
2.style样式
(1)Flexbox...
(2)Transforms...
(3)backfaceVisibility enum('visible','hidden')
(4)borderColor string
(5)borderTopColor string
(6)borderRightColor string
(7)borderBottomColor string
(8)borderLeftColor string
(9)borderRadius number
.....
代码示例:
'user strict' const React =require('react-native'); const { AppRegistry, ScrollView, StyleSheet, RefreshControl, Text, View, }=React; const styles=StyleSheet.create({ row:{ borderColor:'red', borderWidth:5, padding:5, backgroundColor:'#3a5795', margin:5, }, text:{ alignSelf:'center', color:'#fff', }, scrollview:{ flex:1, } }); const Row =React.createClass({ //误导新手啊,这句没用啊... /* _onClick:function (){ this.props.onClick(this.props.data); },*/ render:function(){ return ( <View style={styles.row}> <Text style={styles.text}> {this.props.data.text} </Text> </View> ); }, }); const RefreshControlDemo =React.createClass({ getInitialState(){ return { isRefreshing:false, loaded:0, rowData:Array.from(new Array(20)).map( (val,i) =>({text:"初始行"+i}) ), }; }, render(){ const rows=this.state.rowData.map((row,ii) =>{ return <Row key={ii} data={row}/> }); return( <ScrollView style={styles.scrollview} refreshControl={ <RefreshControl refreshing={this.state.isRefreshing} onRefresh={this._onRefresh} colors={['#ff0000','#00ff00']} progressBackgroundColor="#ffffff" /> }> {rows} </ScrollView> ); }, _onRefresh(){ this.setState({isRefreshing:true}); setTimeout(() =>{ //准备下拉刷新的5条数据 const rowData =Array.from(new Array(5)) .map((val,i) =>({ text:'刷新行'+(+this.state.loaded+i) })) .concat(this.state.rowData); this.setState({ loaded:this.state.loaded+5, isRefreshing:false, rowData:rowData, }); },2000); }, }); AppRegistry.registerComponent('MyProject2', () => RefreshControlDemo);View Code
- HDU 1711(KMP)字符串匹配
- 学习Javascript闭包(Closure)
- PHP中的字符转义
- GUID(全局唯一标识符)
- Android开发之Intent.Action
- 20135202闫佳歆--week5 系统调用(下)--学习笔记
- 前端知识体系
- 【云计算】使用docker搭建nfs实现容器间共享文件
- wave overfly
- [bzoj2154]Crash的数字表格
- my97时间控件的使用
- RecyclerView再封装
- 令人困惑的值传递和引用传递
- 正确配置 Nginx + PHP
- CentOS7.0下安装和配置zabbix2.4.5全过程及解决一些遇到的问题
- Android中LayoutParams总结和用法
- IT十八掌作业_java基础第十六天_GUI/socket
- 无法访问您试图使用的功能所在的网络位置 无法找到vcredist.msi的解决办法
- NFS文件系统简介及原理
- (java)快排方法求最大的第K个数