React Native Swipe Drag Drop

Artikellink

Ziel

React Native Community hat kein offizielles Dokument oder keine offizielle Quelle veröffentlicht, um Drag-Drop-Swipe-Touch-Gesten auf einer Komponente zu realisieren. Ich habe einige Erfahrungen mit der Verwendung von Touch Gesten in einer Komponente einige Projekte, also habe ich versucht, diese Funktionen für eine einfache reag -native Anwendung zu zeigen. Ich hoffe es wird dir helfen.

Installation

Beginnen wir mit der Installation der erforderlichen Pakete.

yarn install

Es gibt einige Zeilen, die wir auf der Android -Seite hinzufügen müssen. Dieser Schritt ist für iOS nicht erforderlich. Die Zeilen sind mit "+" angezeigt. Der Pfad ist Android/App/SRC/Main/Java/MainActivity.java

 package com . gesturehandler ;

import com . facebook . react . ReactActivity ;

+ import com . facebook . react . ReactActivityDelegate ;
+ import com . facebook . react . ReactRootView ;
+ import com . swmansion . gesturehandler . react . RNGestureHandlerEnabledRootView ;

public class MainActivity extends ReactActivity {

  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */
  @ Override
  protected String getMainComponentName ( ) {
    return "gestureHandler" ;
  }

  + @ Override
  + protected ReactActivityDelegate createReactActivityDelegate ( ) {
  +   return new ReactActivityDelegate ( this , getMainComponentName ( ) ) {
  +     @ Override
  +     protected ReactRootView createRootView ( ) {
  +       return new RNGestureHandlerEnabledRootView ( MainActivity . this ) ;
  +     }
  +   } ;
  + }
  
}

Unsere Beispiel -App bereit!

yarn run android

Wir können es mit dem obigen geschriebenen Befehl auf einem Android -Emulator ausführen.