react-native-viewpager是一個輪播圖元件，最近有一個需求是有一個測試題頁面，我第一反應是用一個輪播圖元件，只是把輪播圖替換成輪播檢視，每個視圖裡面內容比圖片複雜一些而已。。。然而，我只是這麼想想，實際做起來還不知道會遇到什麼坑，開始踩坑吧。

npm install react-native-viewpager --save

一開始就遇到一個比較坑的問題，我直接谷歌搜尋react-native-viewpager 出來的第一個一看是github上面的，點進去也叫這個名字，沒毛病啊，跟著教程安裝，輸入安裝命令：npm install rn-viewpager --save

接著看教程，太簡短了。。簡短到我懷疑人生，

var ViewPager = require('react-native-viewpager');
<ViewPager
    dataSource={this.state.dataSource}
    renderPage={this
 
._renderPage}/>

現在這個時代誰還用es5，先把引入方式改一下：
import ViewPager from 'react-native-viewpager';
接著看，看這個結構是不是跟ListView元件一樣一樣的？先暫時不管配置引數，我的第一目標是先讓檢視輪播起來，這裡也沒寫dataSource應該怎麼定義，renderPage應該怎麼渲染，我理所當然的認為跟listview是一樣的，於是我的程式碼是這樣寫的：

    const ds = new ListView.DataSource({
      rowHasChanged: (r1,r2) => r1
 
 !== r2
    });
    this.state = {
      dataSource : ds.cloneWithRows(data),
    }

<ViewPager 
        dataSource = {this.state.dataSource}
        renderPage = {this._renderPage.bind(this)} />

_renderPage(rowData,sectionID,rowID) {
}

然後報錯了：

哈哈哈，我就知道沒這麼簡單，應該是dataSource出了問題，於是我又去找，總算找到這個是怎麼用的了：

const ds = new ViewPager.DataSource({
      pageHasChanged: (p1,p2) => p1 !== p1,
   });
    this.state = {
      dataSource: viewPagerDs.cloneWithPages(data),
    }

再模擬幾條假的資料，就能看到輪播圖效果了。
當然，我的任務遠不止這些，考慮到我的實際專案需求，首先不能根據手勢切換上一條下一條資料，只能點選上一題和下一題切換，所以我要先禁用手勢切換。自動播放也不行，看一下配置引數：

dataSource: this is require to provide pages data,
renderPage: this is require to render page view,
autoPlay: true to turn page automatically,
initialPage: to set the index of the first page to load,
isLoop: true to run in infinite scroll mode,
locked: true to disable touch scroll,
onChangePage: page change callback,
renderPageIndicator: render custom ViewPager indicator. （是否顯示小圓點）
initialPage: show initially some other page than first page.

找到我需要的兩個引數是autoPlay和locked，autoPlay是是否自動播放，設定為false,locked是是否鎖定手勢滾動，設定為true.
這一步很簡單，然後可以看到預設的翻頁小圓點樣式是在圖片下方的，而我希望小圓點在最上方，而且是紅色，而且還有顏色透明度的變化和當前選中頁的圓點大小比其他圓點大的效果，然後看一下引數，renderPageIndicator 值為true顯示小圓點，但是我需要修改小圓點的樣式，這裡沒有暴露出可以修改小圓點樣式的屬性，沒辦法，去找原始碼吧，把原始碼蒐羅出來改改。順便提一下，所有安裝的元件都在node_modules中，在這個資料夾中修改檔案除非重新react-native run-android 才會生效，所以可以把這個元件移動到跟pages,container等資料夾同級的libs資料夾下。
順著renderPageIndicator在ViewPage.js檔案中找到關鍵程式碼：

renderPageIndicator(props) {
    if (this.props.renderPageIndicator === false) {
      return null;
    } else if (this.props.renderPageIndicator) {
      return React.cloneElement(this.props.renderPageIndicator(), props);
    } else {
      return (
        <View style={styles.indicators}>
          <DefaultViewPageIndicator {...props} />
        </View>
      );
    }
  },

可以看到這裡的這個view裝小圓點的外層檢視了，看一下外層檢視的樣式：

 indicators: {
    flex: 1,
    alignItems: 'center',
    position: 'absolute',
    bottom: 10,
    left: 0,
    right: 0,
    backgroundColor: 'transparent',
  },

再繼續找小圓點的樣式，在DefalutViewPageIndicator.js中：

dot: {
    width: DOT_SIZE,
    height: DOT_SIZE,
    borderRadius: DOT_SIZE / 2,
    backgroundColor: '#E0E1E2',
    marginLeft: DOT_SAPCE,
    marginRight: DOT_SAPCE,
  },

  curDot: {
    position: 'absolute',
    width: DOT_SIZE,
    height: DOT_SIZE,
    borderRadius: DOT_SIZE / 2,
    backgroundColor: '#80ACD0',
    margin: DOT_SAPCE,
    bottom: 0,
  },

很明顯，dot就是未選中小圓點的樣式，curDot就是選中小圓點的樣式，然後等等！！不要急著改，萬一下一個地方也用了這個元件但是樣式跟現在的樣式需求不一樣呢？最好的辦法就是從父元件傳遞樣式屬性到DefalutViewPageIndicator.js檔案，（因為要修改的樣式有點多，所以我直接就把整個style傳遞給子元件了），先弄清楚元件結構：DefalutViewPageIndicator.js是ViewPage.js的子元件，ViewPage.js是我的頁面的子元件，要從我的頁面傳遞樣式給孫子元件：
我的頁面：

<ViewPager 
        dataSource = {this.state.questionDataSource}
        renderPage = {this._renderPage.bind(this)} 
        autoPlay = {false}
        locked = {true}
        dotViewStyle={{}}
        dotStyle = {{}}
        selectedDotStyle = {{}}/>

dotStyle和selectedDotStyle就是我自定義用來控制小圓點樣式的屬性，dotViewStyle是小圓點外層檢視樣式
在ViewPage.js中：

{this.renderPageIndicator({goToPage: this.goToPage,
                            pageCount: pageIDs.length,
                            activePage: this.state.currentPage,
                            scrollValue: this.state.scrollValue,
                            scrollOffset: this.childIndex,
                            dotViewStyle: PropTypes.object,//增加
                            dotStyle: this.props.dotStyle,//增加
                            selectedDotStyle: this.props.selectedDotStyle//增加
                          })}

propTypes: {
    //...
    animation: PropTypes.func,
    initialPage: PropTypes.number,
    //add by melody
    dotStyle: PropTypes.object,//增加
    selectedDotStyle: PropTypes.object,//增加
  },

<View style={[styles.indicators,this.props.dotViewStyle]}>
     <DefaultViewPageIndicator {...props} />
</View>

從父元件拿到這兩個屬性繼續傳遞給DefalutViewPageIndicator.js：
在DefalutViewPageIndicator.js中：

propTypes: {
    goToPage: React.PropTypes.func,
    activePage: React.PropTypes.number,
    pageCount: React.PropTypes.number,
     //add by melody
    dotStyle: React.PropTypes.object,//增加
    selectedDotStyle: React.PropTypes.object,//增加
  },

<View style={styles.dot} />
改為：
<View style={[styles.dot,this.props.dotStyle]} />

<Animated.View style={[styles.curDot, {left}]} />
改為：
<Animated.View style={[styles.curDot, this.props.selectedDotStyle, {left}]} />

再去修改樣式已經能起作用了，但是我需要的樣式改起來沒我想象中的簡單，不過我慢慢調吧，除了樣式，還有最重要的是給上一題和下一題繫結事件。