問題タブ [panresponder]

コメントのリストがあり、それらのコメントをドラッグ アンド ドロップして並べ替えたいと考えています。リストは次のようになります: https://i.stack.imgur.com/sozkK.png

私の問題は、ユーザーがコメントをドラッグしているときにアイテムがある場所に「プレビュー」を表示したいということです。そのため、アイテムがリストの別のアイテムにドラッグされるたびに、それら2つを入れ替えてリストを並べ替えますしかし次に、現在ドラッグされているアイテムが、ドラッグしているアイテムに変わります。配列 ["a","b","c"] があるとします。A をドラッグして B の上に移動すると、ドラッグしている項目が B に変換されます (B が最初の位置にあるため)。配列)。私が望むのは、ドラッグされているアイテムがそこにドロップされた場合にリストがどのように見えるかのプレビューを簡単に表示することです

これは私のコンポーネントです:

親の関数:

子ノードのみが Panresponder ジェスチャをキャプチャできるようにする方法を見つけようとしています。ここでの意図は、子コンポーネントが親コンポーネント内で自由に移動できるようにすることです。また、親コンポーネントはタッチに応答してはなりません。したがって、移動できなくなります。また、子コンポーネントは親コンポーネントの境界内でのみ移動できる必要があります。ここまでで、大きな円のコンポーネントを作成しました。そして、その中に小さな円がネストされています。次の図 を参照してください。クリックして図を表示します 。Panresponder プロパティが親コンポーネントに設定されています。ただし、コンポーネントのドラッグを開始すると、親コンポーネントもタッチに応答します。これは、componentWillMount ライフサイクルでコーディングした方法です。

これは render メソッドでどのように見えるか、

ここでの私の目標は、ビュー コンポーネントである最も深いノードを作成することです。これは、大きな円内を移動する小さな黒い円です。そして、大きな円はまったく動かないはずです。さらに、小さな円は大きな円内のタッチにのみ応答する必要があります。残念ながら、私はまだここで立ち往生しています。大円もタッチに反応しているようです。