React-native-Beispielcode zur Implementierung des Schiebelöscheffekts des Einkaufswagens

Grundsätzlich verfügen alle E-Commerce-Projekte über die Funktion eines Einkaufswagens. Dies ist ein Artikel über React-Native. Ich habe schon lange nichts mehr über natives Android geschrieben. Ich erinnere mich, dass ich beim Schreiben des nativen Einkaufswagens auf eine Frage zu dem Produkt stieß, die mich tief ins Innerste trieb: Warum ist die Wisch-zum-Löschen-Funktion unter iOS möglich, aber unter Android so schwierig zu implementieren? Zu diesem Zeitpunkt öffnete ich WeChat und stellte fest, dass die Android-Version von WeChat zur Bedienung ebenfalls langes Drücken verwendet, während die iOS-Version die Wischbedienung verwendet. Die Systeminteraktionsvorgänge der beiden Plattformen sind unterschiedlich. Natürlich habe ich am Ende trotzdem still und leise nach verschiedenen Bibliotheken von Drittanbietern gesucht, um das gleitende Löschen durchzuführen.

Das Projekt von rn ist auch eine im Internet gefundene Drittanbieterbibliothek für Listenschiebevorgänge, GitHub-Adresse react-native-swipe-list-view

Die grundlegendste Verwendung ähnelt der von flatList, der Datenquelle des Datenattribut-Arrays, renderItem nimmt Daten einzeln aus den Daten und rendert sie in die Liste

<SwipeListView
  Daten = {dieser.Zustand.ListenansichtDaten}
  renderItem={dieses.renderItem}
  keyExtractor={dieser.keyExtractor}
/>

Derzeit können Sie nicht nach links oder rechts schieben, genau wie beim gewöhnlichen FlatList-Effekt. Fügen Sie das Attribut renderHiddenItem hinzu, um das Schieben nach links und rechts zu ermöglichen. renderHiddenItem rendert den versteckten Inhalt. Die Position des versteckten Inhalts wird durch das Flex-Layout gesteuert. Das folgende Beispiel verwendet ein horizontales Layout und steuert den Inhalt auf der linken und rechten Seite durch space-between, sodass der versteckte Inhalt beim Wischen nach links oder rechts erscheint.

//Dies kann nach links und rechts verschoben werden renderHiddenItem = (data, rowMap) => {
  return <Ansichtsstil={{
    flex: 1,
    flexDirection: "Zeile",
    justifyContent: 'Zwischenraum'
  }}>
    <Text>Links</Text>
    <Text>Rechts</Text>
  </Anzeigen>
}

Wir müssen nur in der Lage sein, nach links zu wischen, und die Eigenschaft „justifyContent: ‚flex-end‘ verwenden, um den Inhalt der Schaltfläche „Löschen“ ganz rechts zu platzieren, und die SwipeListView-Eigenschaft „disableRightSwipe“ festlegen, um die Wischoperation nach rechts zu unterbinden.

renderHiddenItem = (Daten, Zeilenzuordnung) => {
  return <Ansichtsstil={{
    flex: 1,
    flexDirection: "Zeile",
    Inhalt begründen: 'flex-end',
  }}>
    <TouchableOpacity-Stil={{
      Hintergrundfarbe: '#FF496C',
      Breite: 80,
      Inhalt ausrichten: 'zentriert',
      alignItems: "zentriert"
    }}>
      <Text style={{color:'#fff'}}>Löschen</Text>
    </TouchableOpacity>
  </Anzeigen>
}

Wenn Sie jetzt nach links wischen, wird die Löschtaste rechts angezeigt. Sie ist jedoch nicht immer geöffnet. Sie müssen auch das Attribut rightOpenValue={-80} hinzufügen, um sie zu öffnen.

<SwipeListView
  Deaktivieren Sie RightSwipe
  Daten={dieser.Zustand.listViewData}
  renderItem={dieses.renderItem}
  keyExtractor={dieser.keyExtractor}
  renderHiddenItem={this.renderHiddenItem}
  rechterÖffnenWert={-80}
/>

Außerdem ist zu beachten, dass beim Rendern einer Liste durch renderItem die offizielle Empfehlung lautet, für die äußerste Ebene eine anklickbare und berührungsempfindliche Ansicht anstelle von <View/> zu verwenden. Wenn eine Ansicht geöffnet ist und Sie auf eine andere Ansicht klicken, wird das geöffnete Element normalerweise standardmäßig geschlossen. Wenn die äußerste Ebene <View/> ist, tritt dieser Effekt nicht auf.

//Die äußerste Ebene ist TouchableHighlight
renderItem = ({item, index}, rowMap) => {
  return <TouchableHighlight
    beim Drücken={() => {
    }}
    UnterlageFarbe={'#fff'}>
    ...
  </TouchableHighlight>
}

An diesem Punkt ist der Effekt des Schiebens zum Löschen im Wesentlichen erfüllt. Als Nächstes folgt die Geschäftslogik und die Seite zur Aktualisierung der Datenquelle für Hinzufügungs- und Löschvorgänge.

Dies ist das Ende dieses Artikels über den Beispielcode von react-native zur Implementierung des gleitenden Löscheffekts des Einkaufswagens. Weitere relevante Inhalte zum gleitenden Löschen von react-native finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!