做過移動開發的朋友都知道，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：頁面滑動的的狀態，分為三個狀態

     onPageSelected:該屬性對應的函式引數：event,可以通過event.nativeEvent獲取到具體資訊，如：當前所處的頁面下標.

     下面來讓我們具體看下應用場景：

<ViewPagerAndroid
         ref='ViewPager'
         style={{flex:1}}
         onPageScroll={this.onPageScroll}
         onPageScrollStateChanged={this.onPageScrollStateChanged}
         onPageSelected={this.onPageSelected.bind(this)}
        >
        <HomeView/>
        <MusicView/>
        <FriendView/>
</ViewPagerAndroid>
 

內部三個View是三個頁面，用起來還是蠻簡單的。

      這裡面要提到一個ViewPager.setPage(position)和ViewPager.setPageWithoutAnimation(position)，類似於安卓中的，setCurrentItem方法.用於切換都某一屏。

      最後不過感覺還是react-native-viewpager封裝的比較好，ViewPager應該和ListView是一個級別，應該有其的dataSource，renderPage,或許FB有他們自己的想法吧.

      最後貼幾張效果圖:

     效果圖比較Low，主要看下整體效果吧，滑動體驗上不遜於Native.

 原始碼連結