在两个可拖动的 Flatlist 之间拖放 - React Native

Question

我正在努力为我的 React-Native 应用程序创建一个要求，其中我有一个空白的保管箱（在放置平面列表项目时，它应该转换为可拖动的平面列表）和一个可拖动的平面列表，我必须将其拖放到空白处保管箱，反之亦然。

两个平面列表中的项目应该有一个单击的右侧菜单，其中应该显示一个选项，用于将项目移动到另一个平面列表。

我知道这是一个非常常见的场景，但由于我对 React-Native 还很陌生，所以我正在努力获取任何库或自己创建相同的库。

我正在将 React-Native 与 Redux 和 Typescript 结合使用

我正在使用react-native-draggable-flatlist作为Flatlist（https://github.com/computerjazz/react-native-draggable-flatlist），请告诉我是否有更好的选择

Answer 1

我创建了一个最小的示例，react-native-gesture-handler让我知道它是否有帮助：

let dropzoneHeight = 200;
let itemHeight = 60;

let FlatItem = ({ item }) => {
  let translateX = new Animated.Value(0);
  let translateY = new Animated.Value(0);
  let onGestureEvent = Animated.event([
    {
      nativeEvent: {
        translationX: translateX,
        translationY: translateY,
      },
    },
  ]);
  let _lastOffset = { x: 0, y: 0 };
  let onHandlerStateChange = event => {
    if (event.nativeEvent.oldState === State.ACTIVE) {
      _lastOffset.x += event.nativeEvent.translationX;
      _lastOffset.y += event.nativeEvent.translationY;
      translateX.setOffset(_lastOffset.x);
      translateX.setValue(0);
      translateY.setOffset(_lastOffset.y);
      translateY.setValue(0);

      //TODO here you have to check if the item is inside of container and if it is do some calculations to relocate it to your container.
    }
  };
  return (
    <PanGestureHandler
      onGestureEvent={onGestureEvent}
      onHandlerStateChange={onHandlerStateChange}>
      <Animated.View
        style={[styles.item, { transform: [{ translateX }, { translateY }] }]}>
        <Text>{item.id}</Text>
      </Animated.View>
    </PanGestureHandler>
  );
};

let data = [
  { key: 1, id: 1 },
  { key: 2, id: 2 },
  { key: 3, id: 3 },
  { key: 4, id: 4 },
];
export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={data}
          ListHeaderComponent={() => <View style={styles.dropzone} />}
          renderItem={props => <FlatItem {...props} />}
          style={{ flex: 1 }}
        />
      </View>
    );
  }
}

如果你想测试的话，这是零食！