購物車的功能基本上電商項目都會有的，這是一篇關于react-native的，原生android的已經好久沒寫了。記得以前寫原生購物車的時候，遇到過產品的靈魂質問，為啥iOS的滑動刪除可以，android卻那么難實現的。這個時候，我就打開微信說，android的微信版也是長按進行操作，iOS的是滑動操作的，兩個平臺自帶的系統交互操作是不一樣的。當然，最后還是默默的找各種三方庫去進行滑動刪除。
rn的項目也是找的網上的一個三方庫進行列表滑動操作的，github地址react-native-swipe-list-view
最基本的使用方法和flatList差不多，data 屬性數組數據源，renderItem 從data中挨個取出數據并渲染到列表中
|
1
2
3
4
5
|
<SwipeListView data={this.state.listViewData} renderItem={this.renderItem} keyExtractor={this.keyExtractor}/> |
這時候是不可以左右滑動的，就跟普通的flatList效果一樣。加上renderHiddenItem屬性，可以左右滑動。renderHiddenItem渲染的就是隱藏的內容，隱藏的內容位置是通過flex布局來控制，下面這個例子使用橫向布局，通過space-between將內容控制在左右兩邊，形成了左右滑動時出現隱藏內容。
|
1
2
3
4
5
6
7
8
9
10
11
|
//這是左右都可以滑動的renderHiddenItem = (data, rowMap) => { return <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}> <Text>Left</Text> <Text>Right</Text> </View>} |
我們這邊只需要可以左滑，通過justifyContent: 'flex-end'屬性將刪除按鈕內容置于最右邊，同時設置SwipeListView的屬性disableRightSwipe來禁止右滑操作。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
renderHiddenItem = (data, rowMap) => { return <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end', }}> <TouchableOpacity style={{ backgroundColor: '#FF496C', width: 80, justifyContent: 'center', alignItems: 'center' }}> <Text style={{color:'#fff'}}>刪除</Text> </TouchableOpacity> </View>} |
這個時候向左滑，可以看到右邊的刪除按鈕出來了，但是沒有一直處于打開狀態，還需要添加rightOpenValue={-80}屬性，使其處于打開狀態。
|
1
2
3
4
5
6
7
8
|
<SwipeListView disableRightSwipe data={this.state.listViewData} renderItem={this.renderItem} keyExtractor={this.keyExtractor} renderHiddenItem={this.renderHiddenItem} rightOpenValue={-80}/> |
另外有一個需要注意的是，renderItem進行列表渲染時，最外層的視圖，官方推薦使用可點擊響應觸摸的，而不是<View/>，正常情況是，打開了一個視圖，點其他視圖，默認會關閉打開的那一項，如果最外層是<View/>則不會有這種效果。
|
1
2
3
4
5
6
7
8
9
|
//最外層是 TouchableHighlightrenderItem = ({item, index}, rowMap) => { return <TouchableHighlight onPress={() => { }} underlayColor={'#fff'}> ... </TouchableHighlight>} |
至此，滑動刪除的效果已經基本滿足了，后續就是業務邏輯，增刪操作數據源刷新頁面了。
到此這篇關于react-native 實現購物車滑動刪除效果的示例代碼的文章就介紹到這了,更多相關react-native 滑動刪除內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://juejin.cn/post/6917609565685055502
