时间戳

首页 > 解决方案 > 使用 panResponder 时如何在平面列表中拖放单个项目？

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

问题描述

我使用 flatList 从数组数据中渲染每个项目。我想拖放每个项目平面列表，所以我使用了 panResponder 和 aminated API。但是当我拖放时，它会同时移动 flatList 中的所有项目。如何仅移动我在其中单击的 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>
)

在此处输入图像描述

标签： react-nativeanimationdrag-and-dropreact-native-flatlist

解决方案

你可以试试这个库：https ://github.com/computerjazz/react-native-draggable-flatlist

它完全符合您的需要。

推荐阅读