摘要：因而對(duì)于現(xiàn)有的普通列表界面，要替換成側(cè)滑列表，改動(dòng)相對(duì)小些。如果想要實(shí)現(xiàn)類似那樣的側(cè)滑效果，就不能給每個(gè)按鈕都設(shè)置背景色，需要稍微投機(jī)取巧下。相關(guān)代碼有分組的側(cè)滑列表無(wú)分組的側(cè)滑列表

如果列表行數(shù)據(jù)需要更多的操作，使用側(cè)滑菜單是移動(dòng)端比較常見(jiàn)的方式，也符合用戶的操作習(xí)慣，對(duì)app的接受度自然會(huì)相對(duì)提高點(diǎn)。最近得空就把原來(lái)的react-native項(xiàng)目升級(jí)了側(cè)滑操作，輕輕松松支持android和ios雙平臺(tái)，效果如下。

說(shuō)來(lái)慚愧，使用了react native快一年，還是不懂怎么使用experimental的組件。而rn的側(cè)滑列表組件還處于實(shí)驗(yàn)性階段，文檔幾乎是沒(méi)有的，網(wǎng)上搜了下也沒(méi)啥資料，好在還有源碼和注釋。首先引入實(shí)驗(yàn)性組件，google下才知道是直接引用的方式，把它當(dāng)作一個(gè)已經(jīng)npm install的第三方組件來(lái)使用就行。類似這樣：

import SwipeableListView from "SwipeableListView";

雖然還是有其它react native側(cè)滑組件可以選擇，但想著盡量用rn提供的，就沒(méi)去細(xì)看了。因?yàn)閞eact native提供的側(cè)滑列表注釋里已經(jīng)寫明，目標(biāo)是集成到當(dāng)前的ListView組件，合二為一。因而對(duì)于現(xiàn)有的普通列表界面，要替換成側(cè)滑列表，改動(dòng)相對(duì)小些。

需要改動(dòng)的幾個(gè)地方如下：

引入組件，至少引入以下3個(gè)組件。

import SwipeableListView from "SwipeableListView";
import SwipeableQuickActions from "SwipeableQuickActions";
import SwipeableQuickActionButton from "SwipeableQuickActionButton";

列表ListView替換為SwipeableListView。在render中直接修改即可，同時(shí)需要再提供maxSwipeDistance
和 renderQuickActions兩個(gè)屬性，用于設(shè)置側(cè)滑菜單的長(zhǎng)度和菜單按鈕的渲染方法。

 this._renderActions(rowData, sectionId)}  
        enableEmptySections={true}  
        initialListSize={10}  
        pageSize={10}
...

DataSource數(shù)據(jù)源替換為SwipeableListView.getNewDataSource()。如果需要設(shè)置數(shù)據(jù)源的接口方法，可以先引入SwipeableListViewDataSource，再去重寫它的接口。跟原有的差不多，例如：

dataSource: new SwipeableListViewDataSource({
      getSectionHeaderData: (dataBlob, sectionId) => dataBlob[sectionId],
      getRowData: (dataBlob, sectionId, rowId) => dataBlob[sectionId].getRow(rowId),
      rowHasChanged: (row1, row2) => row1 !== row2,
      sectionHeaderHasChanged: (s1, s2) => s1 !== s2
    })

實(shí)現(xiàn)側(cè)滑視圖渲染接口renderQuickActions。返回一個(gè)視圖。代碼差不多這個(gè)樣子：

_renderActions(rowData, sectionId) {
  return (
    
      { sectionId !== 2 &&
       this._moreActions(rowData, sectionId)}
                                  style={styles.rowAction} textStyle={styles.rowText}/>
      }
       this._delete(rowData)}
                                  style={styles.rowActionDestructive} textStyle={styles.rowText}/>
    
  );
}

這樣大體上就差不多，細(xì)節(jié)的地方靠填坑。

rn已經(jīng)坑很多了，這種實(shí)驗(yàn)性的組件就更坑爹，改造過(guò)程磕磕碰碰在所難免。稍微記錄下，方便后來(lái)人。

目前（v0.37）側(cè)滑列表組件的數(shù)據(jù)源只支持有分組的接口，不提供無(wú)分組的簡(jiǎn)化接口，相當(dāng)不爽。每次列表重載要克隆的時(shí)候只好寫個(gè)全套。

dataSource: this.state.dataSource.cloneWithRowsAndSections({s1:this.listSource.datas}, ["s1"], null)

側(cè)滑的背景視圖與原始行一樣高矮胖瘦，如果原始行有margin，就有露底的尷尬，需要稍微調(diào)整下原始行的樣式。
側(cè)滑按鈕的屬性，圖標(biāo)是必須提供的！！完全不考慮你需不需要，直接強(qiáng)加于人。繞過(guò)的辦法是傳遞一個(gè)無(wú)法顯示圖片的對(duì)象，比如一對(duì)花括號(hào)。

 this._toProject(rowData)}
                                  style={styles.rowAction} textStyle={styles.rowText}/>

查看了源碼，側(cè)滑按鈕的間距被強(qiáng)制寫死了4dip，無(wú)法自定義樣式。如果想要實(shí)現(xiàn)類似QQ那樣的側(cè)滑效果，就不能給每個(gè)按鈕都設(shè)置背景色，需要稍微投機(jī)取巧下。

所有行的側(cè)滑按鈕總長(zhǎng)度都是一致的，如果有的行要兩個(gè)按鈕有的只要一個(gè)按鈕，也只能捉襟見(jiàn)肘的放任著。暫無(wú)解決辦法。

添加了三個(gè)側(cè)滑按鈕，也只顯示最后兩個(gè)，直接無(wú)語(yǔ)，莫名其妙的最多只支持兩個(gè)。

基于坑爹的以上，調(diào)整下設(shè)計(jì)需求，勉強(qiáng)過(guò)關(guān)。只顯示兩個(gè)按鈕，最多支持兩種顏色。

給側(cè)滑視圖設(shè)置一個(gè)背景色，讓它也作為左邊第一個(gè)按鈕的顏色。不過(guò)這里會(huì)出現(xiàn)一點(diǎn)小狀況，如果原始行的點(diǎn)擊組件是使用TouchableOpacity，一旦行被按下，側(cè)滑按鈕就會(huì)一覽無(wú)余的露點(diǎn)了。這時(shí)需要把原始行的點(diǎn)擊組件替換為其它的，我選了另一個(gè)實(shí)驗(yàn)性組件TouchableBounce，當(dāng)然也可以用別的。TouchableBounce被按下去會(huì)縮小，還好只是露出該邊，勾引用戶去側(cè)滑也是好的。

列表行處于側(cè)滑打開(kāi)的狀態(tài)，只能有一行，這個(gè)還算符合國(guó)際標(biāo)準(zhǔn)。不過(guò)點(diǎn)擊側(cè)滑行，并不會(huì)收起側(cè)滑，也沒(méi)有提供控制接口。不過(guò)源碼里面可以找到一點(diǎn)蛛絲馬跡，通過(guò)改變數(shù)據(jù)源來(lái)控制。一般人我不會(huì)告訴他是這么操作的

this.state.dataSource.setOpenRowID(null);

好在我的要求不高，就著源碼，改動(dòng)起來(lái)也算簡(jiǎn)單，大致能滿足要求。

相關(guān)代碼：
有分組的側(cè)滑列表
無(wú)分組的側(cè)滑列表