Touchable opacity OnPress no funciona en React Native
TouchableOpacity onPress no funciona dentro de Flatlist, pero cuando reemplazo onPress con onPressIn/onPressOut funciona bien, pero en ese caso la reacción es demasiado rápida y tengo problemas al desplazarme. No sé qué está pasando y no he encontrado ningún problema relacionado. A continuación se muestra mi código:
renderItem = ({ item, index }: { item: any, index: number }) => {
const { type } = this.props;
const valueType = {
phone: item,
stage: item.title,
location: item.name
}
return (
<touchableopacity onpressin="{()" ==""> this.onSelect(item, index)}
style={styles.modalListContainer}
>
<icon name="{icon[type]}" height="{20}" width="{20}/">
<spacer width="{10}">
<view style="{styles.modelTextContainer}">
<text style="{styles.modelText}">{valueType[type]}</text>
</view>
</icon></touchableopacity>
)
}
<flatlist data="{item}" renderitem="{this.renderItem}" keyextractor="{this.keyExtractor}" itemseparatorcomponent="{()" ==""> <><spacer height="{10}"><view style="{styles.modelTextDevider}"></view><spacer height="{10}">}
showsVerticalScrollIndicator={false}
contentContainerStyle={styles.container}
/>
Se renderiza dentro de un Modal utilizando la biblioteca react-native-modals. Cualquier ayuda sería apreciada. Gracias.
davy.ai
Explicación de por qué TouchableOpacity onPress no funciona dentro de Flatlist
Según el código proporcionado, parece que el
TouchableOpacity onPressno está funcionando como se espera dentro deFlatlist. Sin embargo, cuando se reemplaza onPress con onPressIn/onPressOut, funciona bien pero con una reacción rápida que causa problemas al desplazarse.Esto podría estar sucediendo debido a que onPressIn/onPressOut se activa tan pronto como se detecta un toque, sin esperar a que el usuario suelte el dedo. Esto puede hacer que la función se active involuntariamente, lo que conduce a un comportamiento inesperado.
Para solucionar este problema, intenta usar el método onPress junto con onLongPress en lugar de onPressIn/onPressOut. Esto permitirá al usuario activar la acción solo cuando hayan mantenido presionado el dedo durante una duración específica.
Por ejemplo:
Esto hará que sea más fácil para el usuario desplazarse sin activar acciones no deseadas.
Además, puede ser útil verificar si hay algún componente padre que pueda estar interfiriendo con el componente TouchableOpacity dentro de Flatlist.
Espero que esto ayude a resolver el problema.