react-native-maps - null不是对象（评估'_this $ state $ region.latitude'）(null is not an object (evaluating '_this$state$region.latitude' ))

Question

In this code I am facing an error message tht null is not an object.

(在这段代码中，我面临一条错误消息，该错误不是对象。)

When I click on the button .

(当我单击按钮时。)

The app crashes and could not load back to the location set earlier in this code.

(该应用程序崩溃，无法加载回此代码前面设置的位置。)

I am using react-native-maps library.

(我正在使用react-native-maps库。)

In code below I want to view map that is working fine.

(在下面的代码中，我想查看工作正常的地图。)

but when I click on the button the region object does not work.

(但是当我单击按钮时，区域对象不起作用。)

import React from 'react';
import MapView from 'react-native-maps';
import { StyleSheet, View, Dimensions,Permissions,Location } from 'react-native';
import Destinationbutton from './components/Destinationbutton';
import CurrentLocationButton from './components/CurrentLocationButton';
export default class App extends React.Component {
  constructor(props){
    super(props);
    this.state={
      region : null,
      }
      this._getLocationAsync();
      }
      _getLocationAsync = async () =>{
        let {status} = await Permissions.askAsync(Permissions.LOCATION);
        if (status !== 'granted')
        console.log('Permission to access location was denied.');
        let location = await Location.getCurrentPositionAsync({enableHighAccuracy : true});

        let region = {
          latitude :  location.coords.latitude,
          longitude : location.coords.longitude,
          latitudeDelta : 0.045,
          longitudeDelta : 0.045
        }
        this.setState({region: region}) 
      } 
    centerMap() {
        const { latitude,
             longitude,
             latitudeDelta,
             longitudeDelta } =  this.state.region ;

        this.map.animateToRegion({
            latitude,
            longitude,
            latitudeDelta,
            longitudeDelta
        })
    }      
  render() {
    return (
      <View style={styles.container}>
        <MapView
        initialRegion={this.state.region}
        showsUserLocation={true}
        showsCompass={true}
        ref={(map) =>{this.map = map }}
        rotateEnable={true}
        style={{flex:1,zIndex:0}}
      />
      <Destinationbutton />
      <CurrentLocationButton cb={() => { this.centerMap() }} />
      </View>
    );
  }}
const styles = StyleSheet.create({
  container: {
    flex:1,
    backgroundColor: '#fff',
    zIndex:0

  },
});

  ask by Rana Muhammad Umair translate from so

Answer 1

等待大神答复