ReactNative学习实例（七）ViewPagerAndroid_react-native pagerview 内容偏移-优快云博客

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