ReactNative之ScrollView（八）

2017-05-06 本文已影响616人袁峥

前言

眼看很多公司都开始尝试使用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;
    }

}

ReactNative之ScrollView（八）

前言

ReactNative之ScrollView

ScrollView常用的属性

ScrollView常用的方法

获取ScrollView偏移量

使用

猜你喜欢

热点阅读