React Native Swipe Drag Drop

Lien d'article

But

React Native Community n'a publié aucun document ou source officiel pour réaliser des gestes tactiles de Drag-Drop-Swipe sur un composant. J'ai des expériences sur l'utilisation des gestes tactiles sur un composant certains projets, j'ai donc essayé de montrer ces fonctionnalités sur une simple application native React. J'espère que cela vous aidera.

Installation

Commençons à installer les packages requis.

yarn install

Il y a certaines lignes que nous devons ajouter du côté Android. Cette étape n'est pas nécessaire pour que iOS. Les lignes à ajouter sont indiquées par "+". Le chemin est, 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 ) ;
  +     }
  +   } ;
  + }
  
}

Notre exemple d'application prêt!

yarn run android

Nous pouvons l'exécuter avec la commande écrite ci-dessus sur un émulateur Android.