时间戳

首页 > 解决方案 > 反应原生选择多个项目，如画廊

react-native - 反应原生选择多个项目，如画廊

问题描述

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

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

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

这个例子

这是我做的

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

控制台日志和屏幕截图

无法获得触动的价值

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

我可以获得 xy 坐标值，但如何使用它。

标签： react-nativeuigesturerecognizeruipangesturerecognizer

解决方案

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

为了在滑动元素时存储所选项目，您需要创建 2 个状态，比如说：selectedElements和gestureSelectionList

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

抱歉，如果我无法清楚地解释它。你可以在我完成的地方查看我的 GitHub 存储库：https ://github.com/sushantdsuwal/DragAndSelectMultipleItems

推荐阅读