从iOS开发的经验来看，scrollView无疑是移动开发中很重要的一个组件。下面先看一下ScrollView中常用的属性：
contentContainerStyle StyleSheetPropType(ViewStylePropTypes)
这些样式会应用到一个内层的内容容器上，所有的子视图都会包裹在内容容器内。
horizontal bool
当此属性为true的时候，所有的的子视图会在水平方向上排成一行，而不是默认的在垂直方向上排成一列。默认值为false。
keyboardDismissMode enum(‘none’, “interactive”, ‘on-drag’)
用户拖拽滚动视图的时候，是否要隐藏软键盘。
none（默认值），拖拽时不隐藏软键盘。
on-drag 当拖拽开始的时候隐藏软键盘。
interactive
软键盘伴随拖拽操作同步地消失，并且如果往上滑动会恢复键盘。安卓设备上不支持这个选项，会表现的和none一样。
keyboardShouldPersistTaps bool
当此属性为false的时候，在软键盘激活之后，点击焦点文本输入框以外的地方，键盘就会隐藏。如果为true，滚动视图不会响应点击操作，并且键盘不会自动消失。默认值为false。
onScroll function
在滚动的过程中，每帧最多调用一次此回调函数。调用的频率可以用scrollEventThrottle属性来控制。
refreshControl element
指定RefreshControl组件，用于为ScrollView提供下拉刷新功能。
removeClippedSubviews bool
（实验特性）：当此属性为true时，屏幕之外的子视图（子视图的overflow样式需要设为hidden）会被移除。这个可以提升大列表的滚动性能。默认值为true。
showsHorizontalScrollIndicator bool
当此属性为true的时候，显示一个水平方向的滚动条。
showsVerticalScrollIndicator bool
当此属性为true的时候，显示一个垂直方向的滚动条。
alwaysBounceHorizontal bool
当此属性为true时，水平方向即使内容比滚动视图本身还要小，也可以弹性地拉动一截。当horizontal={true}时默认值为true，否则为false。
ios alwaysBounceVertical bool
当此属性为true时，垂直方向即使内容比滚动视图本身还要小，也可以弹性地拉动一截。当horizontal={true}时默认值为false，否则为true。
ios automaticallyAdjustContentInsets bool
如果滚动视图放在一个导航条或者工具条后面的时候，iOS系统是否要自动调整内容的范围。默认值为true。（译注：如果你的ScrollView或ListView的头部出现莫名其妙的空白，尝试将此属性置为false）
ios bounces bool
当值为true时，如果内容范围比滚动视图本身大，在到达内容末尾的时候，可以弹性地拉动一截。如果为false，尾部的所有弹性都会被禁用，即使alwaysBounce*属性为true。默认值为true。
ios bouncesZoom bool
当值为true时，使用手势缩放内容可以超过min/max的限制，然后在手指抬起之后弹回min/max的缩放比例。否则的话，缩放不能超过限制。
ios canCancelContentTouches bool
当值为false时，一旦有子节点响应触摸操作，即使手指开始移动也不会拖动滚动视图。默认值为true（在以上情况下可以拖动滚动视图。）
ios centerContent bool
当值为true时，如果滚动视图的内容比视图本身小，则会自动把内容居中放置。当内容比滚动视图大的时候，此属性没有作用。默认值为false。
ios contentInset {top: number, left: number, bottom: number, right: number}
内容范围相对滚动视图边缘的坐标。默认为{0, 0, 0, 0}。
ios contentOffset PointPropType
用来手动设置初始的滚动坐标。默认值为{x: 0, y: 0}。
ios decelerationRate number
一个浮点数，用于决定当用户抬起手指之后，滚动视图减速停下的速度。常见的选项有：
Normal: 0.998 (默认值)
Fast: 0.9
ios directionalLockEnabled bool
当值为真时，滚动视图在拖拽的时候会锁定只有垂直或水平方向可以滚动。默认值为false。
ios maximumZoomScale number
允许的最大缩放比例。默认值为1.0。
ios minimumZoomScale number
允许的最小缩放比例。默认值为1.0。
ios onRefreshStart function
已过期
请使用refreshControl 属性代替。
ios onScrollAnimationEnd function
当滚动动画结束之后调用此回调。
ios pagingEnabled bool
当值为true时，滚动条会停在滚动视图的尺寸的整数倍位置。这个可以用在水平分页上。默认值为false。
ios scrollEnabled bool
当值为false的时候，内容不能滚动，默认值为true。
ios scrollEventThrottle number
这个属性控制在滚动过程中，scroll事件被调用的频率（单位是每秒事件数量）。更大的数值能够更及时的跟踪滚动位置，不过可能会带来性能问题，因为更多的信息会通过bridge传递。默认值为0，意味着每次视图被滚动，scroll事件只会被调用一次。
ios scrollIndicatorInsets {top: number, left: number, bottom: number, right: number}
决定滚动条距离视图边缘的坐标。这个值应该和contentInset一样。默认值为{0, 0, 0, 0}。
ios scrollsToTop bool
当此值为true时，点击状态栏的时候视图会滚动到顶部。默认值为true。
ios snapToAlignment enum(‘start’, “center”, ‘end’)
当设置了snapToInterval，snapToAlignment会定义停驻点与滚动视图之间的关系。
start (默认) 会将停驻点对齐在左侧（水平）或顶部（垂直）
center 会将停驻点对齐到中间
end 会将停驻点对齐到右侧（水平）或底部（垂直）
ios snapToInterval number
当设置了此属性时，会让滚动视图滚动停止后，停止在snapToInterval的倍数的位置。这可以在一些子视图比滚动视图本身小的时候用于实现分页显示。与snapToAlignment组合使用。
ios stickyHeaderIndices [number]
一个子视图下标的数组，用于决定哪些成员会在滚动之后固定在屏幕顶端。举个例子，传递stickyHeaderIndices={[0]}会让第一个成员固定在滚动视图顶端。这个属性不能和horizontal={true}一起使用。
ios zoomScale number
滚动视图内容初始的缩放比例。默认值为1.0。
OnMomentumScrollEnd function
当一帧滚动完毕的时候调用，e.nativeEvent.contentOffset。
onScrollBeginDrag fuction
当开始手动拖拽的时候调用。
onScrollEndDrag fuction
当结束手动拖拽的时候调用。
*注意：ScrollView是继承自View，所以View中所有的属性同样适用于ScrollView。
两个要点：
a）ScrollView必须有一个确定的高度才能正常工作
它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。
通常有两种做法：
第一种： 直接给该ScrollView进行设置高度(不建议)；
第二种： ScrollView中不要加{flex:1}。
b）ScrollView内部的其他响应者尚无法阻止ScrollView本身成为响应者
来看一个例子，自动滚动banner
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 |
//引入定时器 //需要导入计时器类库 //npm i react-timer-mixin --save var timerMixin = require('react-timer-mixin'); //引入json数据 var ImageData = require('./ScrollImageData.json'); //屏幕大小 var Dimensions = require('Dimensions'); var {width} = Dimensions.get('window'); var scrollView = React.createClass({//类名一定要大写开头 //注册定时器 mixins:[timerMixin], //不可改变的值 getDefaultProps(){//设置默认属性 return{ title:'test', time:1000 } }, propTypes:{ title : React.PropTypes.string },//属性校验器,表示必须是字符串 //可改变的值 getInitialState(){ return{ currentPage: 0 } }, componentWillMount(){ }, //渲染视图 render() { return ( //<ScrollView> // {/*调用创建view的方法*/} // {this.renderChildView()} //</ScrollView> <View style={styles.content}> <ScrollView ref="scrollView" horizontal={true} showsHorizontalScrollIndicator={false} pagingEnabled={true} onMomentumScrollEnd={(e)=>this.onAnimationEnd(e)} onScrollBeginDrag={this.onScrollBeginDrag} onScrollEndDrag={this.onScrollEndDrag} > {this.renderAllImage()} </ScrollView> {/*指示器*/} <View style={styles.pageViewStyle}> {/*五个圆点*/} {this.renderPageControl()} </View> </View> ); }, //一般在此方法中请求数据或实现复杂操作 componentDidMount(){ //开启定时器 this.startTimer(); }, startTimer(){ //拿到scrollView var scrollView = this.refs.scrollView; var imageCount = ImageData.data.length; //添加定时器 this.timer = this.setInterval(function () { //设置圆点 var activePage = 0; if ((this.state.currentPage+1) >= imageCount){ activePage = 0; }else{ activePage = this.state.currentPage+1; } this.setState({ currentPage:activePage }); //让scrollView滚动起来 var offsetX = activePage * width; scrollView.scrollResponderScrollTo({x:offsetX, y:0, animated:true}); }, this.props.time); }, //创建五个视图 renderChildView(){ //数组 var allChild = []; var colors = ['red','green','blue','yellow','gray']; //遍历 for (var i = 0; i < 5; i++){ allChild.push( //这里的key主要是用来作为唯一的标识 <View key={i} style={{backgroundColor:colors[i], width:320, height:200}}> <Text>{i}</Text> </View> ); } //返回 return allChild; }, //返回 renderAllImage(){ //数组 var allImage = []; var imageArr = ImageData.data; for (var i = 0; i < imageArr.length; i ++) { var imageItem = imageArr[i]; allImage.push( <Image key={i} source={{uri:imageItem.img}} style={{width:width, height:120}}> </Image> ); } return allImage; }, renderPageControl(){ var controlArr = []; var imageArr = ImageData.data; var style; for (var i = 0; i < imageArr.length; i ++) { //判断 style = (i == this.state.currentPage) ? {color:'orange'} : {color:'white'} controlArr.push( <Text key={i} style={[{fontSize:25},style]}>•</Text> ); } return controlArr; }, onAnimationEnd(e){ //求出水平方向偏移量 var offSetX = e.nativeEvent.contentOffset.x; //求出当前页数 var currentPage = Math.floor(offSetX/width); //更新状态机,重新绘制UI this.setState({ //当前页码 currentPage:currentPage }); }, onScrollBeginDrag(){ this.clearInterval(this.timer); }, onScrollEndDrag(){ this.startTimer(); } }) const styles = StyleSheet.create({ content:{ marginTop:25, }, pageViewStyle:{ width:width, height:25, backgroundColor:'rgba(0, 0, 0, 0.4)', //定位 position:'absolute', bottom:0, flexDirection:'row', alignItems:'center', } }); |
转载请注明：怼码人生 » React Native中的ScrollView
