web-dev-qa-db-ja.com

2つのドラッグ可能なFlatlist-React Native間のドラッグアンドドロップ

私は、空のドロップボックス（フラットリストアイテムをドロップすると、ドラッグ可能なフラットリストに変換する必要があります）と、空白にドラッグアンドドロップする必要がある場所からのドラッグ可能なフラットリストがある、React-Nativeアプリケーションの要件を作成するのに苦労しています。ドロップボックスとその逆。

両方のフラットリストのアイテムには、クリックすると右側のメニューが表示され、アイテムを他のフラットリストに移動するオプションが表示されます。

それが非常に一般的なシナリオであることは知っていますが、React-Nativeを初めて使用するため、自分でライブラリを入手したり、自分で作成したりするのに苦労しています。

ReduxとTypeScriptでReact-Nativeを使用しています

Flatlist（ https://github.com/computerjazz/react-native-draggable-flatlist ）にreact-native-draggable-flatlistを使用しています。他にもっと良いオプションがあるかどうかお知らせください

javascriptreact-nativeuser-interfacereact-native-iosreact-native-flatlist
3
Saikat Saha

react-native-reanimatedの宣言型APIを使用したよりパフォーマンスの高い方法

<FlatList data={new Array(10).fill(0)}
  renderItem={({item, index}) => <GestureItem key={index} item={item} />}
 />


const GestureItem = ({item})=> {
  const safex = new A.Value(0)
  const safeY = new A.Value(0)
  const draX = new Value(0)
  const dragY = new Value(0)
  const panState = new Value(State.UNDETERMINED)
  const onGestureEvent = A.event([
      {
        nativeEvent: {
          translationX: dragX,
          translationY: dragY,
          state: panState,
        },
      },
    ]);

   const transX = cond(
      eq(panState, State.ACTIVE),
      dragX,
      set(safeX, add(safeX, dragX))
    );

   const transY = cond(
      eq(panState, State.ACTIVE),
      dragY,
      set(safeY, add(safeY, dragY))
    );
  return (
    <PanGestureHandler 
      onGestureEvent={onGestureEvent}
      onHandlerStateChange={onGestureEvent}>

      <A.View style={{width: 100, height : 100, transform :[{translateX: transX}, {translateY: transY}]}} >
     </A.View>
    </PanGestureHandler>


  )
}

リスト項目とそのインデックスを交換するには、Codeコンポーネントを使用します

1
vamshi krishna