Почему компоненты OnPress не работают с плоским списком со столбцами? Работает только с первым столбцом компонентов

Я пробовал с Pressable и touchables, с onPress и onPressOut, и OnPress активируется только в элементах, которые находятся в первом столбце, например, в индексе 0,2,5 и т. д.

<FlatList
  scrollEnabled={false}
  data={photos}
  numColumns={3}
  keyExtractor={(item, index) => index.toString()}
  renderItem={({item, index}) => {
    return (
            <Pressable
              onPressOut={() => {
                console.log(index);
              }}
              onPress={() => console.log(index)}>
              <Image
                resizeMode="cover"
                source={{uri: item.image}}
                style={{
                  height: imageSize,
                  width: imageSize - 6,
                  margin: 3,
                }}
              />
              <ButtonIconSimple
                icon="video-outline"
                size={25}
                color={globalColors.WHITE}
                subStylesButton={{
                  position: 'absolute',
                  top: 5,
                  right: 5,
                }}
              />
              <ButtonIconSimple
                icon="star-outline"
                size={25}
                color={globalColors.WHITE}
                subStylesButton={{
                  position: 'absolute',
                  top: 5,
                  right: 30,
                }}
              />
            </Pressable>
        );
      }}
/>
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
0
0
12
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

попробуйте добавить style={{flex: 1}} в контейнер Pressable. Если все еще ошибка, попробуйте с TouchableOpacity.

Другие вопросы по теме