React Native onLongPress срабатывает onPress, если нажатый компонент повторно отображается - PullRequest
0 голосов
/ 29 апреля 2019

Я реализую галерею изображений. Существует список изображений в квадрате, если пользователь longPress компонент изображения, он будет повторно визуализирован в выбранный компонент изображения, на котором отображается размытый фон и отметка сверху изображения.

Вот обычный компонент изображения:

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

Как предотвратить это?

1 Ответ

0 голосов
/ 29 апреля 2019

Случайно обнаружил альтернативу сразу после того, как я опубликовал вопрос, решенный путем добавления функции 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 action, я с нетерпением жду лучших решений:

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...