使用panresponder时，如何将单个项目拖放

Question

我使用flatlist从数组数据中渲染每个项目。我想拖放每个项目flatlist，因此我使用了panresponder和aminated api。但是，当我拖放时，它会同时将所有项目移动。我如何仅移动1个我单击的项目。

 return (
  <Animated.View
    key={item.index}
    {...this.panResponder.panHandlers}
    style={this.state.pan.getLayout()}>
    <View
      key={item.index}
      style={[styles.event, {
        left: item.left + 50,
        height: item.height,
        width: item.width,
        top: item.top
      }]}
    >
      {this.props.renderEvent ? this.props.renderEvent(item) : (
        <TouchableOpacity
          activeOpacity={0.5}
          onPress={() => this._onEventTapped(this.props.events[item.index])}
        >
          <Text numberOfLines={1} style={styles.eventTitle}>{item.title || 'Event'}</Text>
          {numberOfLines > 1
            ? <Text
              numberOfLines={numberOfLines - 1}
              style={[styles.eventSummary]}
            >
              {item.summary || ' '}
            </Text>
            : null}
          {numberOfLines > 2
            ? <Text style={styles.eventTimes} numberOfLines={1}>{moment(item.start).format(formatTime)} - {moment(item.end).format(formatTime)}</Text>
            : null}
        </TouchableOpacity>
      )}
    </View>
  </Animated.View>
)

在此处输入图像描述

Answer 1

您可以尝试此lib：https：//github.com/computerjazz/react-native-native-draggable-flatlist

它确实可以完成您需要的。