Блог

Я загружаю модальный файл с информацией из выбранного маркера карты. Я делаю это, сохраняя состояние выбранного маркера и передавая его компоненту в модальном режиме для отображения информации с этого конкретного маркера. В результате маркер расфокусируется, и карта возвращается в исходное положение (во многих случаях местоположение пользователя).

Есть ли способ сохранить фокус или каким-то образом загрузить модал таким образом, чтобы карта не была сброшена в местоположение по умолчанию?

Вот фрагмент:

 <View style={styles.mapView}>
        <MapView
          style={styles.mapView}
          showsUserLocation={true}
          showsMyLocationButton={true}
          region={{
            latitude: latitude,
            longitude: longitude,
            latitudeDelta: latitudeDelta,
            longitudeDelta: longitudeDelta,
          }}>
          {
            (markerArr = data.map((listing, index) => (
              <CustomMarker
                key={index}
                image={listing.pin}
                point={listing.point}
                category={listing.categoryID}
                place={listing.place}
                onPress={() => {
                  markerPressed(listing);
                }}
                coordinate={{
                  latitude: listing.latitude,
                  longitude: listing.longitude,
                }}
              />
            )))
          }
        </MapView>
        <Modal
          style={{ position: 'absolute', bottom: 10 }}
          animationType="slide"
          transparent={true}
          visible={modalVisible}
          onRequestClose={() => {
            setModalVisible(!modalVisible);
          }}
          setModalVisiblity={() => {
            setModalVisible((preState) => (preState = !preState));
          }}>
          <TouchableOpacity
            style={styles.containerT}
            activeOpacity={1}
            onPressOut={() => {
              setModalVisible(false);
            }}>
            <ScrollView
              directionalLockEnabled={true}
              contentContainerStyle={{ position: 'absolute', bottom: 35 }}>
              <TouchableWithoutFeedback>
                <View>
                  <TouchableOpacity
                    onPress={() => {
                      onPressListingItem(selectedMarker);
                      setModalVisible(false);
                    }}>
                    <MapListing
                      // key={index}
                      name={selectedMarker.title}
                      image={selectedMarker.pin}
                      point={selectedMarker.point}
                      photo={selectedMarker.photo}
                      category={selectedMarker.categoryID}
                      description={selectedMarker.description}
                      place={selectedMarker.place}
                      link={() => {
                        markerLink(selectedMarker);
                      }}
                    />
                  </TouchableOpacity>
                </View>
              </TouchableWithoutFeedback>
            </ScrollView>
          </TouchableOpacity>
        </Modal>
      </View>