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然后突然清零,页码加一。