Hice una selección personalizada pero tengo el problema de cerrarla si presiono fuera de la selección o de las opciones. básicamente el "botón" es TouchableOpacity y cuando hago clic en él aparece la lista de opciones. Pero ahora puedo cerrarlo solo eligiendo una opción o haciendo clic nuevamente en el botón de selección. ¿Hay alguna manera de verificar si hago clic fuera de TouchableOpacity o no? En una reacción simple, puede otorgar una identificación al componente y verificarlo en el evento Click para ver en qué ha hecho clic. O puede usar el gancho useRef de react que no parece funcionar con react-native. Tengo este código (simplificado):
const [isOpen, setIsOpen] = useState(false) const toggle = () => { setIsOpen(!isOpen)} //... return (<View> <TouchableOpacity onPress={toggle}> <Text>Open select</Text> </TouchableOpacity> <View> {isOpen && options.map(({value, label}) => <View key={value} onPress={toggle}>{label}</View>)} </View> </View>) Como puede ver, puede toggle de llamada solo si presiona el botón de selección o una opción. Quiero llamar a setIsOpen(false) cuando hago clic fuera del cuadro TouchableOpacity .
¿Hay alguna manera o biblioteca para hacerlo?
En primer lugar, el uso correcto de la función de alternar es
setIsOpen(prevIsOpen => !prevIsOpen);Y con respecto a tu pregunta. Simplemente envuelva toda la pantalla en un componente táctil sin ningún comentario.
const close = () => isOpen && setIsOpen(false); return ( <TouchableWithoutFeedback onPress={close} style={{ flex: 1 }}> <View> <TouchableOpacity onPress={toggle}> <Text>Open select</Text> </TouchableOpacity> <View> {isOpen && options.map(({value, label}) => <View key={value} onPress={toggle}>{label}</View>)} </View> </View> </TouchableWithoutFeedback> );puedes usar TouchableWithoutFeedback