为什么 OnPress 组件不能在带有列的平面列表上工作？仅适用于第一列组件

Question

我试过使用 Pressable 和可触摸的，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>
        );
      }}
/>

Answer 1

尝试将 style={{flex: 1}} 添加到 Pressable 容器。如果仍然出错，请尝试使用 TouchableOpacity。

为什么 OnPress 组件不能在带有列的平面列表上工作？仅适用于第一列组件

Why the OnPress components doesn’t work on a flat list with columns? Only works on the first column of components

react-native

react-native-flatlist