反应原生选择多个项目，如画廊答案

【问题标题】：React native select multiple items like gallery反应原生选择多个项目，如画廊
【发布时间】：2021-08-06 10:56:27
【问题描述】：

我们都在手机中使用一些图库应用。在图库中尝试删除照片时，我们可以通过滑动手指来选择多张图片。

我不知道this的关键字，我搜索但找不到事件或处理程序。我真的想在我的应用程序上使用它来选择多个组件列表项。

什么是关键字以及如何实现它。有人帮忙吗？

这是我做的

constructor(props) {
    super(props);
    const panResponder = PanResponder.create({
      onStartShouldSetPanResponder: (evt, gestureState) => true,
      onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
      onMoveShouldSetPanResponder: (evt, gestureState) => true,
      onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
      onPanResponderMove: (event, gesture) => {
         console.log('do',gesture);
      }
   });

渲染

{this.state.hours.map((hours, index) => {
    return (
      <View
        style={{
          backgroundColor: 'red',
        }}
        {...this.state.panResponder.panHandlers}>
        <TouchableOpacity
          style={{backgroundColor: 'blue'}}
          onPress={() => {
            this.hoursSelect(hours, index);
          }}>
          <hoursComponent
            hoursText={hours.hoursText}
            isSelected={hours.isSelected}
            hours={hours}
            pushSecilihours={this.pushhours}
          />
        </TouchableOpacity>
      </View>
    );
  })}

Consolelog and screenshoot

触摸不到的值

这是我需要做的。滑动或触摸组件并获取值。谢谢。

我可以得到 x y 坐标值但是如何使用它。

【问题讨论】：

谁能写点东西
如果你问我，我可以提供更多细节
思路是通过onLayout方法获取item的偏移量，然后使用PanHandler匹配item layout的值和当前的offset值，如果匹配则标记为选中。
最后一部分很容易设置为选中，但其他部分。我添加了一些代码
你解决了吗？

标签： react-native uigesturerecognizer uipangesturerecognizer

【解决方案1】：

您可以使用onLayout方法获取元素的偏移量，然后使用PanResponder检测PanResponder GestureState，然后比较当前元素的offSet和GestureState值，如果匹配则标记为选中。

为了在滑动元素时存储选定的项目，您需要创建 2 个状态，假设：selectedElements 和 gestureSelectionList

selectedElements 存储当前选择的项目。
gestureSelectionList 在滑动元素时跟踪手势触摸元素。
释放触摸手势后，您需要将gestureSelectionList 元素推送到selectedElements，然后清除gestureSelectionList，这样我们就可以再次存储新元素并在下一个手势状态下重复该过程。

对不起，如果我无法清楚地解释它。你可以在我的 GitHub 仓库中查看我所做的：https://github.com/sushantdsuwal/DragAndSelectMultipleItems

【讨论】：