Модальное окно занимает весь экран

У меня есть модальный компонент в 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>
    )
}

Когда отображается модальное окно, оно занимает весь экран, поэтому я не могу получить доступ к элементам фона, как решить эту проблему? Также мне нужно сделать модальное закрытие, когда пользователь нажимает за пределами окна.

Воссоздайте свой компонент, включая ошибку, в песочнице, чтобы отвечающие могли просмотреть и исправить ошибку.

Code Whisperer 09.04.2022 11:58
width: '95%' своего рода «занимает весь экран». Вы можете изменить это на max-width: 95%
mardubbles 09.04.2022 12:03

Высота всего 200. И я не могу получить доступ к экрану ниже или выше

lian 09.04.2022 12:11

@CodeWhisperer мне нужно добавить внешнюю библиотеку для реагирования на нативные во фрагменте кода?

lian 09.04.2022 12:13

пока пример кода работает и воссоздает поведение, о котором вы говорите в предоставленной ссылке, он должен быть хорошим :yes:

Code Whisperer 09.04.2022 12:16
vshf2o.csb.app, вот простой пример. Когда отображается модальное окно, оно охватывает весь экран, и я не могу получить доступ к элементам на заднем плане.
lian 09.04.2022 13:31
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
6
43
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я не думаю, что можно разрешить нажатие на элементы за модальным, потому что он предназначен для предотвращения такого поведения.

Если ваша цель — закрыть модальное окно, нажав на оверлей, вам следует обратить внимание на этот трюк: Закрыть реагирующий нативный модальный режим, нажав на оверлей?

Если вам действительно нужно нажимать на элементы позади, я думаю, вам не следует использовать стандартный модальный режим, а использовать его на основе просмотра, например реагировать родной модальный (сам никогда не проверял). Или, может быть, создать свой собственный.

Другие вопросы по теме