Question

我正在建立图片库。这里有一个正方形的图像列表，如果用户长按一个图像组件，它将重新渲染为一个选定的图像组件，该组件在图像上方显示模糊背景和刻度。

这是正常的图像组件：

<TouchableOpacity
    key={index}
    onPress={this.normalModeImgClick(img, index)}
    onLongPress={this.startSelectMode(index)}
>
    <Image style={styles.img} source={{uri: img.resized_xs_url}}/>
</TouchableOpacity>

以下是处于选择模式的组件：

<TouchableOpacity
    key={itemIndex}
    style={styles.selectedImgWrapper}
    onPress={this.selectModeImgClick(imgItem, itemIndex)}
>
    <Image style={styles.img} source={{uri: imgItem.img.resized_xs_url}}/>
        {imgItem.selected &&
          <View style={styles.selectedImgCover}>
            <Image style={styles.selectedIcon} source={require('../../assets/icon_tick.png')}/>
          </View>
        }
</TouchableOpacity>

如您所见，如果长按正常图像组件startSelectMode将触发，该图像将重新渲染并变为选择模式组件。但是，selectModeImgClick也会被触发，这是不应该的（因为用户仍在执行longPress动作）。

如何防止这种情况发生？

Answer 1

我在发布问题后偶然发现了一个替代方法，通过向选定的模式组件添加onLongPress函数道具来解决，如下所示：

<TouchableOpacity
    key={itemIndex}
    style={styles.selectedImgWrapper}
    onPress={this.selectModeImgClick(imgItem, itemIndex)}
    onLongPress={this.uselessFunction}
>
    <Image style={styles.img} source={{uri: imgItem.img.resized_xs_url}}/>
        {imgItem.selected &&
          <View style={styles.selectedImgCover}>
            <Image style={styles.selectedIcon} source={require('../../assets/icon_tick.png')}/>
          </View>
        }
</TouchableOpacity>

uselessFunction = () => {}

由于该组件的设计目的不是要执行longPress操作，所以我希望有更好的解决方案：

如果重新渲染按下的组件，则React Native onLongPress会触发onPress

1 个答案: