快捷導(dǎo)航

react-native 實現(xiàn)購物車滑動刪除效果的示例代碼

更新時間：2021年01月15日 14:07:49 作者：程序猿tx

這篇文章主要介紹了react-native 實現(xiàn)購物車滑動刪除效果的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

購物車的功能基本上電商項目都會有的，這是一篇關(guān)于react-native的，原生android的已經(jīng)好久沒寫了。記得以前寫原生購物車的時候，遇到過產(chǎn)品的靈魂質(zhì)問，為啥iOS的滑動刪除可以，android卻那么難實現(xiàn)的。這個時候，我就打開微信說，android的微信版也是長按進行操作，iOS的是滑動操作的，兩個平臺自帶的系統(tǒng)交互操作是不一樣的。當(dāng)然，最后還是默默的找各種三方庫去進行滑動刪除。

rn的項目也是找的網(wǎng)上的一個三方庫進行列表滑動操作的，github地址react-native-swipe-list-view

最基本的使用方法和flatList差不多，data 屬性數(shù)組數(shù)據(jù)源，renderItem 從data中挨個取出數(shù)據(jù)并渲染到列表中

<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)容。

//這是左右都可以滑動的
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)容置于最右邊，同時設(shè)置SwipeListView的屬性disableRightSwipe來禁止右滑操作。

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

<SwipeListView
  disableRightSwipe
  data={this.state.listViewData}
  renderItem={this.renderItem}
  keyExtractor={this.keyExtractor}
  renderHiddenItem={this.renderHiddenItem}
  rightOpenValue={-80}
/>

另外有一個需要注意的是，renderItem進行列表渲染時，最外層的視圖，官方推薦使用可點擊響應(yīng)觸摸的，而不是<View/>，正常情況是，打開了一個視圖，點其他視圖，默認(rèn)會關(guān)閉打開的那一項，如果最外層是<View/>則不會有這種效果。

//最外層是 TouchableHighlight
renderItem = ({item, index}, rowMap) => {
  return <TouchableHighlight
    onPress={() => {
    }}
    underlayColor={'#fff'}>
    ...
  </TouchableHighlight>
}

至此，滑動刪除的效果已經(jīng)基本滿足了，后續(xù)就是業(yè)務(wù)邏輯，增刪操作數(shù)據(jù)源刷新頁面了。