如果列表行數(shù)據(jù)需要更多的操作，使用側(cè)滑菜單是移動(dòng)端比較常見的方式个榕，也符合用戶的操作習(xí)慣赖捌，對(duì)app的接受度自然會(huì)相對(duì)提高點(diǎn)。最近得空就把原來的react-native項(xiàng)目升級(jí)了側(cè)滑操作猫缭，輕輕松松支持android和ios雙平臺(tái)，效果如下它褪。
選擇組件
說來慚愧饵骨，使用了react native快一年，還是不懂怎么使用experimental的組件茫打。而rn的側(cè)滑列表組件還處于實(shí)驗(yàn)性階段居触，文檔幾乎是沒有的，網(wǎng)上搜了下也沒啥資料老赤，好在還有源碼和注釋轮洋。首先引入實(shí)驗(yàn)性組件，google下才知道是直接引用的方式抬旺，把它當(dāng)作一個(gè)已經(jīng)npm install的第三方組件來使用就行弊予。類似這樣：import SwipeableListView from 'SwipeableListView';
雖然還是有其它react native側(cè)滑組件可以選擇，但想著盡量用rn提供的开财，就沒去細(xì)看了汉柒。因?yàn)閞eact native提供的側(cè)滑列表注釋里已經(jīng)寫明，目標(biāo)是集成到當(dāng)前的ListView組件责鳍，合二為一碾褂。因而對(duì)于現(xiàn)有的普通列表界面，要替換成側(cè)滑列表历葛，改動(dòng)相對(duì)小些正塌。
開始動(dòng)手
需要改動(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)度和菜單按鈕的渲染方法鸠天。
<SwipeableListView
maxSwipeDistance={120}
renderQuickActions={(rowData, sectionId, rowId) => 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 (
<SwipeableQuickActions style={styles.rowActions}>
{ sectionId !== 2 &&
<SwipeableQuickActionButton imageSource={{}} text={"更多"}
onPress={() => this._moreActions(rowData, sectionId)}
style={styles.rowAction} textStyle={styles.rowText}/>
}
<SwipeableQuickActionButton imageSource={{}} text={"刪除"}
onPress={() => this._delete(rowData)}
style={styles.rowActionDestructive} textStyle={styles.rowText}/>
</SwipeableQuickActions>
);
}
這樣大體上就差不多扛伍，細(xì)節(jié)的地方靠填坑筷畦。
踩坑
rn已經(jīng)坑很多了，這種實(shí)驗(yàn)性的組件就更坑爹，改造過程磕磕碰碰在所難免鳖宾。稍微記錄下吼砂，方便后來人。
- 目前（v0.37）側(cè)滑列表組件的數(shù)據(jù)源只支持有分組的接口鼎文，不提供無分組的簡(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)加于人衷敌。繞過的辦法是傳遞一個(gè)無法顯示圖片的對(duì)象勿侯，比如一對(duì)花括號(hào)。
<SwipeableQuickActionButton imageSource={{}} text={"修改"}
onPress={() => this._toProject(rowData)}
style={styles.rowAction} textStyle={styles.rowText}/>
- 查看了源碼缴罗，側(cè)滑按鈕的間距被強(qiáng)制寫死了4dip助琐，無法自定義樣式。如果想要實(shí)現(xiàn)類似QQ那樣的側(cè)滑效果瞒爬，就不能給每個(gè)按鈕都設(shè)置背景色弓柱，需要稍微投機(jī)取巧下沟堡。
- 所有行的側(cè)滑按鈕總長(zhǎng)度都是一致的侧但，如果有的行要兩個(gè)按鈕有的只要一個(gè)按鈕，也只能捉襟見肘的放任著航罗。暫無解決辦法禀横。
- 添加了三個(gè)側(cè)滑按鈕，也只顯示最后兩個(gè)粥血，直接無語柏锄，莫名其妙的最多只支持兩個(gè)。
基于坑爹的以上复亏，調(diào)整下設(shè)計(jì)需求趾娃，勉強(qiáng)過關(guān)。只顯示兩個(gè)按鈕缔御，最多支持兩種顏色。
給側(cè)滑視圖設(shè)置一個(gè)背景色，讓它也作為左邊第一個(gè)按鈕的顏色耐齐。不過這里會(huì)出現(xiàn)一點(diǎn)小狀況，如果原始行的點(diǎn)擊組件是使用TouchableOpacity评架，一旦行被按下，側(cè)滑按鈕就會(huì)一覽無余的露點(diǎn)了炕泳。這時(shí)需要把原始行的點(diǎn)擊組件替換為其它的纵诞，我選了另一個(gè)實(shí)驗(yàn)性組件TouchableBounce，當(dāng)然也可以用別的培遵。TouchableBounce被按下去會(huì)縮小浙芙，還好只是露出該邊，勾引用戶去側(cè)滑也是好的籽腕。
列表行處于側(cè)滑打開的狀態(tài)茁裙，只能有一行，這個(gè)還算符合國(guó)際標(biāo)準(zhǔn)节仿。不過點(diǎn)擊側(cè)滑行晤锥，并不會(huì)收起側(cè)滑，也沒有提供控制接口廊宪。不過源碼里面可以找到一點(diǎn)蛛絲馬跡矾瘾，通過改變數(shù)據(jù)源來控制。一般人我不會(huì)告訴他是這么操作的箭启，this.state.dataSource.setOpenRowID(null);
完成
好在我的要求不高壕翩，就著源碼，改動(dòng)起來也算簡(jiǎn)單傅寡，大致能滿足要求放妈。
相關(guān)代碼：
有分組的側(cè)滑列表
無分組的側(cè)滑列表
