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

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

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

import SwipeableListView from "SwipeableListView";

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

需要改動的幾個地方如下：

引入組件，至少引入以下3個組件。

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

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

 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
    })

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

_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}/>
    
  );
}

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

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

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

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

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

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

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

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

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

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

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

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

this.state.dataSource.setOpenRowID(null);

好在我的要求不高，就著源碼，改動起來也算簡單，大致能滿足要求。

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