React Native之ViewPagerAndroid讲解与应用

        做过移动开发的朋友都知道，ViewPager控件在应用场景是在常见不过了，React Native（RN）给我们提供了一套针对安卓平台的component:ViewPagerAndroid。不过github上面有人实现了跨平台的ViewPager，只是体验上有点欠佳。这里乱侃一句，虽说FB打的旗号是：Learn once,write anywhere。但是觉得应该会慢慢的演变成write once run anywhere.如果体验不差的情况下，问谁愿意去写两套代码呢，所以看看FB的API以及开源框架，慢慢的都已经演变成跨平台的了。所以说，跨平台才是王道，虽说RN性能与体验上优于H5，但是跨平台性远远不及H5，所以今后一定是H5的天下.

     了解下ViewPagerAndroid的属性.

     initialPage:初始化时候下标(从 0开始),类似于安卓ViewPager中的setCurrentItem方法.

     onPageScroll：当页面滑动的时候执行.该属性对应回调函数参数:event，可以通过event.nativeEvent获取到具体信息，，包含两个数据，position和offset.（position:很好理解，就是当前所处的下标，offset:是0到1之间的数，其实简单点就是滑动当前页面的百分比.）

     onPageScrollStateChanged：页面滑动的的状态，分为三个状态:idle(空闲)，dragging(拖动中),settling（手松开处理中）.

     onPageSelected:该属性对应的函数参数：event,可以通过event.nativeEvent获取到具体信息，如：当前所处的页面下标.

     scrollEnabled:该组件是否可以滑动，默认为true，false 则禁止滑屏。

     下面来让我们具体看下应用场景：

内部三个View是三个页面，用起来还是蛮简单的。

      这里面要提到一个ViewPager.setPage(position)和ViewPager.setPageWithoutAnimation(position)，类似于安卓中的，setCurrentItem方法.用于切换都某一屏。

      最后不过感觉还是react-native-viewpager封装的比较好，ViewPager应该和ListView是一个级别，应该有其的dataSource，renderPage,或许FB有他们自己的想法吧.

      最后贴几张效果图:

           

     效果图比较Low，主要看下整体效果吧，滑动体验上不逊于Native.

     

     源码链接