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

選擇組件

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

import SwipeableListView from 'SwipeableListView';

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

開始動手

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

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

import SwipeableListView from 'SwipeableListView';

import SwipeableQuickActions from 'SwipeableQuickActions';

import SwipeableQuickActionButton from 'SwipeableQuickActionButton';

列表ListView替換為SwipeableListView。在render中直接修改即可，同時需要再提供maxSwipeDistance

和 renderQuickActions兩個屬性，用于設置側滑菜單的長度和菜單按鈕的渲染方法。

maxSwipeDistance={120}

renderQuickActions={(rowData, sectionId, rowId) => this._renderActions(rowData, sectionId)}

enableEmptySections={true}

initialListSize={10}

pageSize={10}

...

DataSource數據源替換為SwipeableListView.getNewDataSource()。如果需要設置數據源的接口方法，可以先引入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

})

實現側滑視圖渲染接口renderQuickActions。返回一個視圖。代碼差不多這個樣子：

_renderActions(rowData, sectionId) {

return (

{ sectionId !== 2 &&

onPress={() => this._moreActions(rowData, sectionId)}

style={styles.rowAction} textStyle={styles.rowText}/>

}

onPress={() => this._delete(rowData)}

style={styles.rowActionDestructive} textStyle={styles.rowText}/>

);

}

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

踩坑

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

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

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

側滑的背景視圖與原始行一樣高矮胖瘦，如果原始行有margin，就有露底的尷尬，需要稍微調整下原始行的樣式。

側滑按鈕的屬性，圖標是必須提供的！！完全不考慮你需不需要，直接強加于人。繞過的辦法是傳遞一個無法顯示圖片的對象，比如一對花括號。

onPress={() => this._toProject(rowData)}

style={styles.rowAction} textStyle={styles.rowText}/>

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

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

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

基于坑爹的以上，調整下設計需求，勉強過關。只顯示兩個按鈕，最多支持兩種顏色。

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

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

this.state.dataSource.setOpenRowID(null);

完成

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

總結

以上是生活随笔為你收集整理的PHP防QQ列表右划,react native 实现类似QQ的侧滑列表效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。