Tengo un componente modal en StationInfo.js:
import React from 'react'; import { View, Text, StyleSheet } from 'react-native'; export default function StationInfo() { return ( <View style={styles.infoContainer}> </View> ) } const styles = StyleSheet.create({ infoContainer: { backgroundColor: '#ffffff', height: 200, width: '95%', position: 'absolute', bottom: 115, }, });Y Map.js, donde se llama esta ventana modal:
export default function Map() { const [currentPosition, setCurrentPosition] = useState(INITIAL_STATE); const [infoModalVisible, setInfoModalVisible] = useState(false); useEffect(() => { Geolocation.getCurrentPosition(info => { const { longitude, latitude } = info.coords; setCurrentPosition({ ...currentPosition, latitude, longitude, }) }) }, [currentPosition]) return ( <View style={styles.mapContainer}> <MapView provider={PROVIDER_GOOGLE} style={styles.map} initialRegion={currentPosition} showsUserLocation > <Marker key={index} coordinate={marker.coordinates} onPress={() => setInfoModalVisible(true)} /> </MapView> <Modal animationType="slide" transparent={true} visible={infoModalVisible} onRequestClose={() => { setInfoModalVisible(!infoModalVisible); }} > <StationInfo /> </Modal> </View> ) }Cuando se muestra la ventana modal, ocupa toda la pantalla, por lo que no puedo acceder a los elementos de fondo, ¿cómo resolver este problema? También necesito hacer un cierre modal cuando el usuario toque fuera de la ventana.
No creo que sea posible permitir presionar elementos detrás de un modal porque está diseñado para evitar este comportamiento.
Si su objetivo es cerrar el modal haciendo clic en una superposición, debe echar un vistazo a este truco: ¿Cerrar el modal nativo de reacción haciendo clic en la superposición?
Si realmente necesita presionar los elementos que se encuentran detrás, creo que no debe usar el modal estándar, sino uno basado en la vista como react-native-modal (nunca lo probé). O tal vez crear el tuyo propio.