React Native Navigation v1在statTabBasedApp中崩溃

Question

当我在startTabBasedApp（我的3个选项卡）中导航我的应用程序时，第一个屏幕到Render的是EventMap.js，这是我的应用程序崩溃的地方。我只是不知道为什么崩溃，我尝试在所有代码中都放入console.log，但没有出现错误。

所以这里的主要问题是在EventMap.js中，因为当我尝试在startTabBasedApp（主选项卡）中删除EventMap.js时，然后卸载应用程序，运行react-native run-android，打开应用程序，浏览选项卡（2）正常。

我要在我的App中尝试做的是，当用户打开它并将其导航到EventMap.js时，我想立即获取用户的位置，就像在Grab App中一样。

如何在不使应用程序崩溃的情况下实现这一目标？

这是我的EventMap.js代码

class EventMap extends Component {
constructor(props) {
  super(props);

this.state = {
  focusedLocation: {
    latitude: 0,
    longitude: 0,
    latitudeDelta: 0.01,
    longitudeDelta: Dimensions.get('window').width / Dimensions.get('window').height * 0.01
  },
  locationChosen: false,
  markerPosition: {
    latitude: 0,
    longitude: 0
  }
 }
}

componentDidMount() {
  this.didMountGetUserLocation();
};

//This is getting the location and exactly/automatically when they open
didMountGetUserLocation = () => {
  navigator.geolocation.getCurrentPosition(pos => {
    var lat = parseFloat(pos.coords.latitude)
    var long = parseFloat(pos.coords.longitude)

    var initialRegion = {
      latitude: lat,
      longitude: long,
      latitudeDelta: 0.01,
      longitudeDelta: Dimensions.get('window').width / Dimensions.get('window').height *0.01
    };

    this.setState({focusedLocation: initialRegion})
    this.setState({locationChosen: true})
    this.setState({markerPosition: initialRegion})
  },
  err => {
    console.log(err);
  });
};

pickLocationHandler = (event) => {
  const coords = event.nativeEvent.coordinate;
  //For animation of map
  this.map.animateToRegion({
    ...this.state.focusedLocation,
    latitude: coords.latitude,
    longitude: coords.longitude
  });
  this.setState(prevState => {
    return {
      focusedLocation: {
        ...prevState.focusedLocation,
        latitude: coords.latitude,
        longitude: coords.longitude
      },
      locationChosen: true
    };
  });
};

getLocationHandler = () => {
  navigator.geolocation.getCurrentPosition(pos => {
    const coordsEvent = {
      nativeEvent: {
        coordinate: {
          latitude: pos.coords.latitude,
          longitude: pos.coords.longitude
        }
      }
    };
    this.pickLocationHandler(coordsEvent);
  },
  err => {
    console.log(err);
    alert("Fetching failed");
  })
};

render() {
  let marker = null;
  if(this.state.locationChosen) {
    marker = <MapView.Marker coordinate={this.state.markerPosition}/>
  }
  return(
    <View style={{zIndex: -1}}>
     <TouchableOpacity onPress={this.getLocationHandler} style={styles.iconContainer}>
        <Icon name="md-locate" size={30} color="blue"/>
      </TouchableOpacity>
      <MapView
        style={styles.map}
        initialRegion={this.state.focusedLocation}
        onPress={this.pickLocationHandler}
        showsUserLocation={true}
        ref={ref => this.map = ref} //For animating map movement
      >
        {marker}
      </MapView>
    </View>
  );
}
}