使用 panResponder 时，如何在平面列表中拖放单个项目？

Question

I use flatList for render each item from array data. I want to drag and drop each item flatlist so I used panResponder and aminated API. But when I drag and drop, it moving all item in flatList at the same time. How can I move only 1 item that I click in this.

 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>
)

enter image description here

Answer 1

you could try this lib:https://github.com/computerjazz/react-native-draggable-flatlist

it does exactly what you need.