購物車的功能基本上電商項目都會有的，這是一篇關于react-native的，原生android的已經(jīng)好久沒寫了。記得以前寫原生購物車的時候，遇到過產(chǎn)品的靈魂質(zhì)問，為啥iOS的滑動刪除可以，android卻那么難實現(xiàn)的。這個時候，我就打開微信說，android的微信版也是長按進行操作，iOS的是滑動操作的，兩個平臺自帶的系統(tǒng)交互操作是不一樣的。當然，最后還是默默的找各種三方庫去進行滑動刪除。
rn的項目也是找的網(wǎng)上的一個三方庫進行列表滑動操作的，github地址react-native-swipe-list-view
最基本的使用方法和flatList差不多，data 屬性數(shù)組數(shù)據(jù)源，renderItem 從data中挨個取出數(shù)據(jù)并渲染到列表中
|
1
2
3
4
5
|
<SwipeListView data={this.state.listViewData} renderItem={this.renderItem} keyExtractor={this.keyExtractor}/> |
這時候是不可以左右滑動的，就跟普通的flatList效果一樣。加上renderHiddenItem屬性，可以左右滑動。renderHiddenItem渲染的就是隱藏的內(nèi)容，隱藏的內(nèi)容位置是通過flex布局來控制，下面這個例子使用橫向布局，通過space-between將內(nèi)容控制在左右兩邊，形成了左右滑動時出現(xiàn)隱藏內(nèi)容。
|
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'屬性將刪除按鈕內(nèi)容置于最右邊，同時設置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>} |
這個時候向左滑，可以看到右邊的刪除按鈕出來了，但是沒有一直處于打開狀態(tài)，還需要添加rightOpenValue={-80}屬性，使其處于打開狀態(tài)。
|
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>} |
至此，滑動刪除的效果已經(jīng)基本滿足了，后續(xù)就是業(yè)務邏輯，增刪操作數(shù)據(jù)源刷新頁面了。
到此這篇關于react-native 實現(xiàn)購物車滑動刪除效果的示例代碼的文章就介紹到這了,更多相關react-native 滑動刪除內(nèi)容請搜索服務器之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://juejin.cn/post/6917609565685055502
