Блог

Здравствуйте, я пытаюсь исправить свой вид приложения при выходе из полноэкранного режима. Я использую библиотеку React-Map-GL и компонент FullscreenControl, который добавляет кнопку к вашему экземпляру карты и позволяет вам просматривать ее в полноэкранном режиме. При открытии он работает нормально, но при закрытии вид не сворачивается до того же размера. Странный полноэкранный режим при выходе

Вот мой код.

 import React, { useState } from 'react' import ReactMapGL, { Source, Layer, FullscreenControl, NavigationControl } from 'react-map-gl'   type InstanceCardProps = {  item: any  activeResourceType: ResourceType | null  checked: boolean  onChange: any  icon: any  }  export default function InstanceCard (this: any, {  item,  activeResourceType,  checked,  onChange,  icon  }: InstanceCardProps): JSX.Element {  const [collapsed, setCollapsed] = useStatelt;booleangt;(true)   const toggleCollapse = () =gt; {  setCollapsed(!collapsed)  }  const fieldType = activeResourceType === ResourceType.field   const formatDate = (og_date_format: string) =gt; {  return DateTime.fromISO(og_date_format).toFormat(`d MMM yyyy', ' h:mm a`)  }  const centergeo = fieldType amp;amp; item.geometry? [item.geometry][0].coordinates[0][0][0] : "dean"  const Centercoords = [centergeo]  const Multipolycoords = Centercoords[0][0]  const MoreCoords = Centercoords[0][1]  const latitude = fieldType amp;amp; item.center? item.center[1] : Centercoords[0][1]  const longitude = fieldType amp;amp; item.center? item.center[0] : Centercoords[0][0]  const [viewport, setViewPort] = useState({  latitude: latitude,  longitude: longitude,  zoom: 15,  width:500,  height:500,  })  const fullscreenControlStyle={  right:10,  top:10,   };  const ControlStyle={  left:10,  top:10  };  const location = fieldType amp;amp; item.center amp;amp; (  lt;pgt;  Location: {item.center[0].toFixed(2)},{" "}  {item.center[1].toFixed(2)}  lt;/pgt;  )  const PolyCoords = item.geometry   const geojsonSpace = fieldType amp;amp; item amp;amp; (  lt;Spacegt;  lt;Colgt;  lt;ReactMapGL  mapboxApiAccessToken={'token'}  {...viewport}  mapStyle="mapbox://styles/mapbox/light-v9"  interactiveLayerIds={PolyCoords}  onViewportChange={(newView: React.SetStateActionlt;{ latitude: number; longitude: number; zoom: number; width: number; height: number }gt;) =gt; setViewPort(newView)}  gt;  lt;FullscreenControl style={fullscreenControlStyle}/gt;  lt;NavigationControl style={ControlStyle}gt; lt;/NavigationControlgt;  lt;Source  id="fieldjson"  type="geojson"  data={PolyCoords}  /gt;  {/* lt;Layer  id="anything"  type="line"  source="fieldjson"  paint={{  "line-color": "#090909",  "fill-opacity": 0.90  }}  /gt; */}  lt;Layer  id="anything"  type="fill"  source="fieldjson"  paint={{  "fill-color": "#10961b",  "fill-opacity": 0.90  }}  /gt;  lt;/ReactMapGLgt;  lt;/Colgt;  lt;Colgt;  lt;h1gt;{item.name}lt;/h1gt;  lt;Rowgt;{location}lt;/Rowgt;  lt;Rowgt;Acres: {item.declared_area amp;amp; (item.declared_area * 2.471).toFixed(3)} ac lt;/Rowgt;  lt;/Colgt;  lt;/Spacegt;  )