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

rn的項(xiàng)目也是找的網(wǎng)上的一個(gè)三方庫(kù)進(jìn)行列表滑動(dòng)操作的，github地址react-native-swipe-list-view

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

<SwipeListView
  data={this.state.listViewData}
  renderItem={this.renderItem}
  keyExtractor={this.keyExtractor}
/>

這時(shí)候是不可以左右滑動(dòng)的，就跟普通的flatList效果一樣。加上renderHiddenItem屬性，可以左右滑動(dòng)。renderHiddenItem渲染的就是隱藏的內(nèi)容，隱藏的內(nèi)容位置是通過(guò)flex布局來(lái)控制，下面這個(gè)例子使用橫向布局，通過(guò)space-between將內(nèi)容控制在左右兩邊，形成了左右滑動(dòng)時(shí)出現(xiàn)隱藏內(nèi)容。

//這是左右都可以滑動(dòng)的
renderHiddenItem = (data, rowMap) => {
  return <View style={{
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between'
  }}>
    <Text>Left</Text>
    <Text>Right</Text>
  </View>
}

我們這邊只需要可以左滑，通過(guò)justifyContent: 'flex-end'屬性將刪除按鈕內(nèi)容置于最右邊，同時(shí)設(shè)置SwipeListView的屬性disableRightSwipe來(lái)禁止右滑操作。

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>
}

這個(gè)時(shí)候向左滑，可以看到右邊的刪除按鈕出來(lái)了，但是沒(méi)有一直處于打開(kāi)狀態(tài)，還需要添加rightOpenValue={-80}屬性，使其處于打開(kāi)狀態(tài)。

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

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

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

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

到此這篇關(guān)于react-native 實(shí)現(xiàn)購(gòu)物車(chē)滑動(dòng)刪除效果的示例代碼的文章就介紹到這了,更多相關(guān)react-native 滑動(dòng)刪除內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論