React-native sample code to implement the shopping cart sliding deletion effect

Basically all e-commerce projects have the function of shopping cart. This is an article about react-native. I haven’t written about native Android for a long time. I remember when I was writing the native shopping cart, I encountered a soul-searching question about the product: why is the swipe-to-delete function possible on iOS, but so difficult to implement on Android? At this time, I opened WeChat and found that the Android version of WeChat also uses long press for operation, while the iOS version uses sliding operation. The system interaction operations of the two platforms are different. Of course, in the end I still quietly looked for various third-party libraries to perform sliding deletion.

rn's project is also a third-party library found on the Internet for list sliding operations, github address react-native-swipe-list-view

The most basic usage is similar to flatList, data attribute array data source, renderItem takes data one by one from data and renders it into the list

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

At this time, you cannot slide left or right, just like the ordinary flatList effect. Add the renderHiddenItem attribute to enable sliding left and right. renderHiddenItem renders the hidden content. The position of the hidden content is controlled by the flex layout. The following example uses a horizontal layout and controls the content on the left and right sides through space-between, so that the hidden content appears when sliding left or right.

//This can be slid left and right renderHiddenItem = (data, rowMap) => {
  return <View style={{
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between'
  }}>
    <Text>Left</Text>
    <Text>Right</Text>
  </View>
}

We only need to be able to swipe left, and use the justifyContent: 'flex-end' property to place the delete button content on the far right, and set the SwipeListView property disableRightSwipe to prohibit the right swipe operation.

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'}}>Delete</Text>
    </TouchableOpacity>
  </View>
}

At this time, swipe left and you can see the delete button on the right appears, but it is not always in the open state. You also need to add the rightOpenValue={-80} attribute to make it open.

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

Another thing to note is that when renderItem is rendering a list, the official recommendation is to use a clickable and touch-responsive view for the outermost layer, rather than <View/>. Normally, if a view is opened and you click on another view, the opened item will be closed by default. If the outermost layer is <View/>, this effect will not occur.

//The outermost layer is TouchableHighlight
renderItem = ({item, index}, rowMap) => {
  return <TouchableHighlight
    onPress={() => {
    }}
    underlayColor={'#fff'}>
    ...
  </TouchableHighlight>
}

At this point, the effect of sliding to delete has been basically satisfied. The follow-up is the business logic and the data source refresh page for adding and deleting operations.

This is the end of this article about react-native's sample code for implementing the shopping cart sliding deletion effect. For more relevant react-native sliding deletion content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!