React Native Swipe Drag Drop

記事リンク

標的

React Native Communityは、コンポーネントのドラッグドロップスワイプタッチジェスチャーを実現するために、公式のドキュメントやソースを公開していません。コンポーネントでのタッチジェスチャーの使用に関するいくつかの経験があるので、いくつかのプロジェクトであるので、Simple Reactネイティブアプリケーションでこの機能を表示しようとしました。それがあなたに役立つことを願っています。

インストール

必要なパッケージをインストールし始めましょう。

yarn install

Android側に追加する必要がある線がいくつかあります。この手順はiOSには必要ありません。追加する行は「+」で示されています。パスは、 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 ) ;
  +     }
  +   } ;
  + }
  
}

私たちの例アプリの準備ができました！

yarn run android

Androidエミュレータで上記の書面によるコマンドを使用して実行できます。