Javascript 将地图视图调整为带有挂钩的本地地图，函数

所以我有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)

此视图正在从查询中呈现标记（包含餐厅或其他对象的视图） 我想调整mapview以查看所有可能的标记

用钩子可以吗？（几乎所有互联网解决方案都使用：

{mapRef=>this.mapRef=mapRef}

所以它需要类组件

尝试了不同的方法，例如：

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

将所有标记Lat、Lng添加到阵列中，然后：

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

在useEffect中也尝试了使用这些方法，但根本看不到mapRef（mapRef未定义）

但是什么也没有发生，我认为错误在于，在第一次初始渲染时，这些方法没有看到ref to map。 因为当我使用按钮调用方法时，它工作得很好

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

这在带有钩子的函数中是可能的，还是我需要将整个函数重新设置为类组件？

---

抱歉，我的语言出现了错误。

followUserLocation正在自动缩放到用户位置（速度太快），FittoElement和其他元素无法工作（它们可以工作，但会立即缩放）。 所以我在下面设置了超时

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