ReactNative学习实例(七)ViewPagerAndroid

ViewPager也算是比较常用的,比如引导页和轮播图。先来看他的几个属性:

1.initialPage={0},初始页的序号,从零开始,不设置的话默认是0。

2.onPageScroll。接收一个方法,方法有一个event参数,通过event.nativeEvent.position可以拿到当前页码,通过event.nativeEvent.offset拿到偏移量。滑动时调用

3.onPageScrollStateChanged:状态改变时调用:状态有idle,gragging,settling.

4.onPageSelected:也接收带event的方法,切换完成调用,能拿到上面说过的position字段。

(要注意,重写这几个方法的时候必须使用箭头函数)!!!!!!!!!!


通常我们获得当前页面的序号和滑动过程中的偏移量就可以了,所以这个小例子实现了一个简单的viewpager并监听这两个值。

1.首先定义两个数值型state:pagePosition和offset。然后重写onPageScroll(其实严格意义上不能算重写):

    onPageScroll=(event)=>{
        this.setState({pagePosition:event.nativeEvent.position,
                offset:event.nativeEvent.offset});
    }
可以看到,这个方法里把event里两个值取出来并设置给state.注意必须用箭头函数


2.viewpager:

                <ViewPagerAndroid
                    onPageScroll={this.onPageScroll}
                    style={{height:200,width:500}}
                    >
                    <View>
                        <Image
                            style={{height:200,width:500}}
                            source={{uri:'http://p1.so.qhimgs1.com/dmfd/326_204_/t014a9280f55313598d.jpg'}}/>
                    </View>
                    <View>
                        <Image
                            style={{height:200,width:500}}
                            source={{uri:'http://p1.so.qhimgs1.com/sdr/1365_768_/t013a5b13b26f53e9a1.jpg'}}/>
                    </View>
                    <View>
                        <Image
                            style={{height:200,width:500}}
                            source={{uri:'http://p4.so.qhimgs1.com/sdr/1365_768_/t0175e724d3dc217114.jpg'}}/>
                    </View>
                </ViewPagerAndroid>
                <Text>当前是第{this.state.pagePosition}页,偏移量:{this.state.offset}</Text>
这个pager里有三张图片显示,注意viewpager的子组件必须是view。最后用一个text来显示我们监听的两个值。(因为使用的是网络图片所以必须设置宽高)。

效果是没问题的,在滑动时可以清楚的看到偏移量从0慢慢变到1然后突然清零,页码加一。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值