Estoy tratando de crear una vista táctil de pantalla completa que activa su onPress pero también pasa el toque a la vista detrás de él. En el siguiente ejemplo, me gustaría que se llamara a la función onPress cuando el usuario se desplaza por la vista de desplazamiento. Puedo hacer que la vista de desplazamiento responda con pointerEvents="none" en Pressable , pero hacer eso hace que onPress no se active. ¿Hay alguna manera de hacer que ambos funcionen juntos?
const styles = StyleSheet.create({ containingTouchable: { position: 'absolute', top: 0, right: 0, left: 0, bottom: 0, backgroundColor: 'rgba(100,100,100,0.3)', }, }); const Component = () => { <Pressable style={styles.containingTouchable} onPress={() => { console.warn('pressed me'); }} > <View></View> </Pressable> <ScrollView> ... </ScrollView> }Resolvería esto usando react-native-gesture-handler . En lugar de Pressable , use TapGestureHandler . E importe ScrollView desde react-native-gesture-handler .
Rngh proporciona un accesorio llamado simultaneousHandlers para que pueda escuchar múltiples eventos táctiles a la vez.
Así que podrías hacer algo como esto:
const tapGestureHandlerRef = useRef(null); <TapGestureHandler ref={tapGestureHandlerRef} onActivated={handleOnPress} onHandlerStateChange={handleOnPress} > <ScrollView simultaneousHandlers={tapGestureHandlerRef} > {content} </ScrollView> </TapGestureHandler > Tanto onActivated como onHandlerStateChange pueden desencadenar un evento onPress, pero se comportan de manera diferente. Eche un vistazo a los documentos para ver qué se adapta mejor a su caso de uso: https://docs.swmansion.com/react-native-gesture-handler/docs/api/gesture-handlers/tap-gh