Null 不是对象评估 'mapView.current.animateToRegion'

如何解决Null 不是对象评估 'mapView.current.animateToRegion'

在组件 Description 中，我有一个按钮，当我按下按钮时，我将发送到标记的 Map 组件坐标：

   const onNavigationTap = () => {
        navigation.navigate('Map',{
            destination: data["data"].coordinates,});
    }

在组件 Map 中，我有条件：

const mapView = React.createRef();
   if (route.params){
        mapView.current.animateToRegion({ 
            latitude: route.params.destination.latitude,longitude: route.params.destination.longitude,latitudeDelta: 0.4,longitudeDelta: 0.4,},1000);
    }
return (
<MapView ref={mapView} />
)

所以当我打开 Map 时，我想在标记附近显示区域。我试图在地图屏幕上创建一个按钮：

<TouchableOpacity style={{
                    position: 'absolute',top: '5%',alignSelf: 'flex-start'
                }} onPress={animateMap}><Text>Start</Text></TouchableOpacity>

然后我创建了函数：

const animateMap = () => {
        mapView.current.animateToRegion({ // Takes a region object as parameter
            latitude: destination.latitude,longitude: destination.longitude,1000);
    }

这个在地图屏幕上带有按钮的解决方案工作正常，但我想要的是 animateToRegion 不是按下按钮，而是当用户从 Description 组件打开地图时。我不明白为什么在第一种情况下我得到了 Null is not an object(evaluating 'mapView.current.animateToRegion')。请告诉我，如果我想使用从另一个组件获取的参数来制作 animateToRegion 应该怎么做？

解决方法

您得到的错误似乎是因为 mapView.current.animateToRegion 为空。

您可以按照此 sample code 和下面的代码片段来了解如何实现您的用例：

App.js

import * as React from 'react';
import { Button,View,Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import MapScreen from './Map'

function HomeScreen({ navigation }) {

const onBtnPress = () =>{
  navigation.navigate('Maps',{
            destination: { latitude: 40.463667,longitude: -3.74922 },});
}
  return (
    <View style={{ flex: 1,alignItems: 'center',justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={onBtnPress}
      />
    </View>
  );
}


const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Maps" component={MapScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Map.js

import React,{ Component } from 'react';
import { Text,StyleSheet,Dimensions } from 'react-native';
import MapView,{ Marker,Circle,Polyline } from 'react-native-maps';

const styles = StyleSheet.create({
  container: {
    flex: 1,backgroundColor: '#fff',justifyContent: 'center',},map: {
    width: Dimensions.get('window').width,height: Dimensions.get('window').height,});

function Map (props){
const onMapLoad=()=>{
  console.log(this.mapView)
  console.log(props.route.params.destination.latitude)

  this.mapView.animateToRegion({ 
            latitude: props.route.params.destination.latitude,longitude: props.route.params.destination.longitude,latitudeDelta: 0.4,longitudeDelta: 0.4,1000);

}
    return (
      <View style={styles.container}>
        <MapView
         ref={(ref) => this.mapView = ref}
          style={styles.map}
          initialRegion={{
            latitude: 37.78825,longitude: -122.4324,latitudeDelta: 0.0922,longitudeDelta: 0.0421,}}
        onMapReady={onMapLoad}
          >
       
        </MapView>
      </View>
    );
  }
 export default Map;