У меня есть модальный компонент в 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,
},
});
И Map.js, где это модальное окно называется:
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>
)
}
Когда отображается модальное окно, оно занимает весь экран, поэтому я не могу получить доступ к элементам фона, как решить эту проблему? Также мне нужно сделать модальное закрытие, когда пользователь нажимает за пределами окна.
width: '95%'
своего рода «занимает весь экран». Вы можете изменить это на max-width: 95%
Высота всего 200. И я не могу получить доступ к экрану ниже или выше
@CodeWhisperer мне нужно добавить внешнюю библиотеку для реагирования на нативные во фрагменте кода?
пока пример кода работает и воссоздает поведение, о котором вы говорите в предоставленной ссылке, он должен быть хорошим :yes:
Я не думаю, что можно разрешить нажатие на элементы за модальным, потому что он предназначен для предотвращения такого поведения.
Если ваша цель — закрыть модальное окно, нажав на оверлей, вам следует обратить внимание на этот трюк: Закрыть реагирующий нативный модальный режим, нажав на оверлей?
Если вам действительно нужно нажимать на элементы позади, я думаю, вам не следует использовать стандартный модальный режим, а использовать его на основе просмотра, например реагировать родной модальный (сам никогда не проверял). Или, может быть, создать свой собственный.
Воссоздайте свой компонент, включая ошибку, в песочнице, чтобы отвечающие могли просмотреть и исправить ошибку.