前言
眼看很多公司都开始尝试使用ReactNative,达到跨平台开发，最近也写了很多文章，希望让更多想了解的同学快速上手ReactNative.
如果喜欢我的文章，可以关注我微博:袁峥Seemygo
ReactNative之ScrollView
- 都知道普通的View,是不能滚动的，那么想要一个View,能滚动，就需要使用ScrollView
- ScrollView什么时候能滚动，当内容超出自己尺寸的时候就能滚动，
ScrollView常用的属性
horizontal bool
当此属性为true的时候，所有的子视图会在水平方向上排成一行，而不是默认的在垂直方向上排成一列。默认值为false。
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) contentInset {top: number, left: number, bottom: number, right: number}
内容范围相对滚动视图边缘的坐标。默认为{0, 0, 0, 0}
。
(ios) contentOffset PointPropType
用来手动设置初始的滚动坐标。默认值为{x: 0, y: 0}
pagingEnabled bool
当值为true时，滚动条会停在滚动视图的尺寸的整数倍位置。这个可以用在水平分页上。默认值为false。
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。
stickyHeaderIndices [number]
一个子视图下标的数组，用于决定哪些成员会在滚动之后固定在屏幕顶端。举个例子，传递stickyHeaderIndices={[0]}
会让第一个成员固定在滚动视图顶端。这个属性不能和horizontal={true}
一起使用。
ScrollView常用的方法
- 开发中，常需要在滚动的时候做事情，那怎么监听ScrollView滚动
// 监听滚动开始
onMomentumScrollBegin={this._onMomentumScrollBegin.bind(this)}
// 监听滚动结束
onMomentumScrollEnd={this._onMomentumScrollEnd.bind(this)}
// 监听开始拖拽
onScrollBeginDrag={this._onScrollBeginDrag.bind(this)}
// 监听结束拖拽
onScrollEndDrag={this._onScrollEndDrag.bind(this)}
// 监听滚动动画完成
onScrollAnimationEnd={this._onScrollAnimationEnd.bind(this)}
// 监听滚动的时候
onScroll={this._onScroll.bind(this)}
// 设置滚动频率,一滚动就监听,需要和onScroll配套使用
scrollEventThrottle={1}
获取ScrollView偏移量
- 滚动的时候,会传入一个合成事件作为监听滚动方法的参数，每个方法都会有这个合成事件
- 通过合成事件能获取原生事件nativeEvent,原生事件nativeEvent会有我们想要的信息.
- 什么是合成事件：在React中，事件的处理由其内部自己实现的事件系统完成，触发的事件都叫做 合成事件（SyntheticEvent）
_onScroll(e) {
// console.log('滚动的时候调用');
// 不能通过scrollView获取,因为在RN中,滚动的时候,不会给scrollView组件的contentOffset属性赋值,只能通过nativeEvent事件获取
// var scrollView = this.refs.scrollView;
//
// console.log(scrollView.props.contentOffset);
var nativeEvent = e.nativeEvent;
console.log(nativeEvent.contentOffset);
}
使用
var arr = require('./res/zhubo.json');
var screenW = Dimensions.get('window').width;
// 引入资源:require
export default class ReactDemo extends Component {
render() {
return (
<View style={{flex:1}}>
<ScrollView style={{flex:1,backgroundColor:'red'}}
// 监听滚动开始
onMomentumScrollBegin={this._onMomentumScrollBegin.bind(this)}
// 监听滚动结束
onMomentumScrollEnd={this._onMomentumScrollEnd.bind(this)}
// 监听开始拖拽
onScrollBeginDrag={this._onScrollBeginDrag.bind(this)}
// 监听结束拖拽
onScrollEndDrag={this._onScrollEndDrag.bind(this)}
// 监听滚动动画完成
onScrollAnimationEnd={this._onScrollAnimationEnd.bind(this)}
// 监听滚动的时候
onScroll={this._onScroll.bind(this)}
// 设置滚动频率,一滚动就监听
scrollEventThrottle={1}
ref="scrollView"
>
{this.setupChildView()}
</ScrollView>
</View>
);
}
// 滚动的时候 会传入一个合成事件
// 在 React 中， 事件的处理由其内部自己实现的事件系统完成，触发的事件都叫做 合成事件（SyntheticEvent）
// 通过合成事件能获取原生事件nativeEvent,原生事件nativeEvent会有我们想要的信息.
_onScrollAnimationEnd (e) {
console.log('滚动的完成时候调用');
}
_onScroll(e) {
// console.log('滚动的时候调用');
// 不能通过scrollView获取,因为在RN中,滚动的时候,不会给scrollView组件的contentOffset属性赋值,只能通过nativeEvent事件获取
// var scrollView = this.refs.scrollView;
//
// console.log(scrollView.props.contentOffset);
var nativeEvent = e.nativeEvent;
console.log(nativeEvent.contentOffset);
}
_onScrollBeginDrag(e) {
console.log('开始拖拽的时候调用');
}
_onScrollEndDrag(e) {
console.log('结束拖拽的时候调用');
}
_onMomentumScrollBegin(e) {
console.log('当一帧滚动开始的时候');
}
_onMomentumScrollEnd(e) {
console.log('当一帧滚动结束的时候');
}
setupChildView(){
var childs = [];
for (var i = 0;i < arr.length;i++){
var zhubo = arr[i];
childs.push(
<Image key={i} style={{width:screenW,height:300}} source={{uri:zhubo.icon}}/>
)
}
return childs;
}
}
