使地图视图适合标记以使用 Hooks、Function 对原生地图做出反应

Question

So I have mapview:

import * as React from 'react';
import {
    StyleSheet,
    View,
    Text,
    ScrollView,
    Animated,
    Dimensions,
    Image,
} from "react-native";
import MapView, {Callout, Marker, PROVIDER_GOOGLE} from "react-native-maps";
import * as Location from 'expo-location';
QueryResult from '../../assets/Data.json'; //JSON FILE in desc
import {AppLoading} from "expo";

const styles = StyleSheet.create({
    page: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#F5FCFF"
    },
    container: {
        flex:1,
        backgroundColor: "tomato"
    },
    map: {
        flex: 1
    },
    bubble:{
        backgroundColor: Colors.WHITE1,
        borderRadius: 20,
        flexDirection: "column",
    },
    name:{

    },
    icon:{
        width: 30,
        height:30,
    },
});

const { width, height } = Dimensions.get("window");

function GoogleMapItem() {

    const initialRegion = {
        latitude: 53.3661,
        longitude: 14.5943,
    }

    const navigation = useNavigation();
    const [location, setLocation] = React.useState(initialRegion);
    const [errorMsg, setErrorMsg] = React.useState(null);
    const mapRef = React.useRef()
    const [QueryResult, SetQueryResult] = React.useState(null);

    let iz ={
        latDelta: 0.015,
        longDelta: 0.08,
    }
    let ZOOMS = {
        _latitudeDeltaZOOM_OUT1 : iz.latDelta,
        _longitudeDeltaZOOM_OUT1: iz.longDelta,
        _latitudeDeltaZOOM_INITIAL : iz.latDelta*0.2,
        _longitudeDeltaZOOM_INITIAL: iz.longDelta*0.2,
        _latitudeDeltaZOOM_IN1 :  iz.latDelta*0.1,
        _longitudeDeltaZOOM_IN1:  iz.longDelta*0.1,
    }

    React.useEffect(() => {
        (async () => {
            let { status } = await Location.requestPermissionsAsync();
            if (status !== 'granted') {
                setErrorMsg('Permission to access location was denied');
            }

            let location = await Location.getCurrentPositionAsync({});
            const {longitude, latitude} = location.coords
            setLocation({
                ...location,
                longitude: longitude,
                latitude: latitude,
            })
        })();
    }, []);

        return(
            <View style={styles.map}>
                <MapView style={styles.map}
                         provider={PROVIDER_GOOGLE}
                         loadingEnabled={true}
                         region={{
                             latitude: location.latitude,
                             longitude: location.longitude,
                             latitudeDelta:  ZOOMS._latitudeDeltaZOOM_OUT1,
                             longitudeDelta: ZOOMS._latitudeDeltaZOOM_OUT1,
                         }}
                         showsUserLocation
                         followsUserLocation
                         userLocationUpdateInterval
                         ref={mapRef}

                >
                    {QueryResult.results.map((element,index)=>
                        <Marker key={index} identifier={element.place_id} coordinate={{
                            latitude: element.geometry.location.lat,
                            longitude: element.geometry.location.lng,
                        }}
                        >
                            <View>
                                <Image source={{uri: element.icon}} style={{width:25,height:25,}}></Image>
                            </View>
                        </Marker>
                    )}
                </MapView>
            </View>

        )

}




export default React.memo(GoogleMapItem)

and shortened to two entries json file:

{
   "results" : [
      {
         "business_status" : "OPERATIONAL",
         "geometry" : {
            "location" : {
               "lat" : 53.368006,
               "lng" : 14.6198066
            },
         },
         "icon" : "https://maps.gstatic.com/mapfiles/place_api/icons/v1/png_71/generic_recreational-71.png",
         "name" : "Park Leśny Zdroje",
         "place_id" : "ChIJ7adAEfunAEcRUlmcp_1ReY8",
      },
      {
         "business_status" : "OPERATIONAL",
         "geometry" : {
            "location" : {
               "lat" : 53.3789812,
               "lng" : 14.6186994
            },
         },
         "icon" : "https://maps.gstatic.com/mapfiles/place_api/icons/v1/png_71/generic_business-71.png",
         "name" : "Usługi Ogrodnicze Szczecin Miłorząb M.",
         "place_id" : "ChIJxwSQa_SnAEcRsgtHuw_eeuE",
      },
   ],
   "status" : "OK"
}

And this view is rendering markers from query (View with restaurants or other objects) I want to fit mapview to see all possible markers.

Is this possible with hooks ? (almost all solutions on internet uses: {mapRef=> this.mapRef= mapRef} so It needs class component.

Tried different things like :

OnMapReady or onLayout={ mapRef.current.fitToSuppliedMarkers(markerArray)}
OnMapReady or onLayout={ mapRef.current.fitToElements(true)}

adding all markers Lat,Lng to array and then:

OnMapReady or onLayout={ mapRef.current.fitToCoordinates(markerArrayLatLng}

Tried also using those methods in useEffect but it dont see mapRef at all (mapRef undefined).

But nothing happens and i think the error is that on First initial render those methods dont see ref to map. Because when i use button to call method it's working fine.

<Button title={"test"} onPress={mapRef.current.fitToElements(true)}/>

Is this possible in function with hooks or I need to rearange entire function to class component?

Sorry for errors in my language.

Answer 1

followUserLocation is autozooming to user location (so fast) that fitToElements and others doesn't work(they work but are zoomed immediately). So I set timeout on following.