获取位置时 React Native Map 崩溃应用程序

Question

My project displays a react native map and asks for user location. In development the application runs nickel without error or bug or slowdown while when I build the app and install it when the application crashes.

Demo1: DEMO gif app in developpement npx expo start: works fine Demo2: DEMO gif app builded installed with apk: crash

I use:

"react-native": "0.70.5", "expo": "~47.0.12" "expo-location": "~15.0.1", "@react-native-community/geolocation": "^3.0.4", "react-native-maps": "^1.3.2",

My file that contains my map:

import React, { useEffect, useRef, useState } from "react";
import {
 ...
} from "react-native";
import { StatusBar } from "expo-status-bar";
import * as Location from "expo-location";
import MapView, { Marker } from "react-native-maps";
import { Alert } from "react-native";

const Planisphere = () => {
  const [location, setLocation] = useState(null);
  const [errorMsg, setErrorMsg] = useState(null);
  const [mapRef, setMapRef] = useState(null);
  const [locationAccepted, setLocationAccepted] = useState(false);

  useEffect(() => {
    (async () => {
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== "granted") {
        setErrorMsg("Permission to access location was denied");
        Alert.alert(
          "Location Permission Denied",
          "Please go to settings and enable location permission for this app to continue.",
          [
            {
              text: "Go to Settings",
              onPress: () => Linking.openSettings(),
            },
          ]
        );
        return;
      }

      let subscription = await Location.watchPositionAsync(
        { accuracy: Location.Accuracy.BestForNavigation },
        (location) => {
          setLocation(location);
          setLocationAccepted(true);
        }
      );

      return () => subscription.remove();
    })();
  }, []);

  const handleFindMyLocation = () => {
   ...
  };

  const handleUnzoom = () => {
   ...
  };

  let text = "Waiting..";
  if (errorMsg) {
    text = errorMsg;
  } else if (location) {
    text = JSON.stringify(location);
  }

  return (
    <View style={styles.container}>
      <StatusBar style="auto" />
      {location && (
        <MapView
          ref={(ref) => setMapRef(ref)}
          style={styles.map}
          minZoomLevel={8}
          maxZoomLevel={18}
          initialRegion={{
            latitude: location.coords.latitude,
            longitude: location.coords.longitude,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
        >
          <Marker
            coordinate={{
              latitude: location.coords.latitude,
              longitude: location.coords.longitude,
            }}
            title={"Your location"}
          />
        </MapView>
      )}
      <Text style={styles.paragraph}>{text}</Text>
      {locationAccepted && (
        <View>
          <Button title="Find my location" onPress={handleFindMyLocation} />
          <Button title="Unzoom" onPress={handleUnzoom} />
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
 ...
});

export default Planisphere;

My file ask location and when its authorized, the map appear.

UPDATE:

 useEffect(() => {
    const fetchPermission = async () => {
      try {
        const { status } = await Location.requestForegroundPermissionsAsync();
        setPermissions(status);
        if (status !== "granted") {
          setErrorMsg("Permission to access location was denied");
        }
      } catch (err) {
        setErrorMsg(err.message);
      }
    };
    fetchPermission();
  }, []);

  useEffect(() => {
    const fetchLocation = async () => {
      if (permissions === "granted") {
        const watcher = await Location.watchPositionAsync(
          { accuracy: Location.Accuracy.BestForNavigation },
          (location) => {
            setLocation(location);
            setLocationAccepted(true);
          }
        );
        setSubscription(watcher);
      }
    };
    fetchLocation();
    return () => {
      if (subscription) {
        subscription.remove();
      }
    };
  }, [permissions]);

AndroidManifest

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.flokitoto.mapauthentificate">
  <uses-permission android:name="android.permission.INTERNET"/>
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
  <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
  <uses-permission android:name="android.permission.VIBRATE"/>
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
  <queries>
    <intent>
      <action android:name="android.intent.action.VIEW"/>
      <category android:name="android.intent.category.BROWSABLE"/>
      <data android:scheme="https"/>
    </intent>
  </queries>
  <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="true" android:theme="@style/AppTheme" android:usesCleartextTraffic="true">
    <meta-data android:name="expo.modules.updates.ENABLED" android:value="true"/>
    <meta-data android:name="expo.modules.updates.EXPO_SDK_VERSION" android:value="47.0.0"/>
    <meta-data android:name="expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH" android:value="ALWAYS"/>
    <meta-data android:name="expo.modules.updates.EXPO_UPDATES_LAUNCH_WAIT_MS" android:value="0"/>
    <meta-data android:name="expo.modules.updates.EXPO_UPDATE_URL" android:value="https://exp.host/@flokitoto/mapauthentificate"/>
    <activity android:name=".MainActivity" android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:theme="@style/Theme.App.SplashScreen" android:exported="true" android:screenOrientation="portrait">
      <intent-filter>
        <action android:name="android.intent.action.MAIN"/>
        <category android:name="android.intent.category.LAUNCHER"/>
      </intent-filter>
      <intent-filter>
        <action android:name="android.intent.action.VIEW"/>
        <category android:name="android.intent.category.DEFAULT"/>
        <category android:name="android.intent.category.BROWSABLE"/>
        <data android:scheme="com.flokitoto.mapauthentificate"/>
        <data android:scheme="com.flokitoto.mapauthentificate"/>
      </intent-filter>
    </activity>
    <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" android:exported="false"/>
  </application>
</manifest>

Update:

Error from logs:

FATAL EXCEPTION: expo-updates-error-recovery
 
java.lang.RuntimeException: API key not found.  Check that <meta-data android:name="com.google.android.geo.API_KEY" android:value="your API key"/> is in the <application> element of AndroidManifest.xml
 
FATAL EXCEPTION: expo-updates-error-recovery
Process: com.flokitoto.mapauthentificate, PID: 14044
java.lang.RuntimeException: API key not found.  Check that <meta-data android:name="com.google.android.geo.API_KEY" android:value="your API key"/> is in the <application> element of AndroidManifest.xml

Answer 1

From the error

FATAL EXCEPTION: expo-updates-error-recovery
 
java.lang.RuntimeException: API key not found.  Check that <meta-data android:name="com.google.android.geo.API_KEY" android:value="your API key"/> is in the <application> element of AndroidManifest.xml
 
FATAL EXCEPTION: expo-updates-error-recovery
Process: com.flokitoto.mapauthentificate, PID: 14044
java.lang.RuntimeException: API key not found.  Check that <meta-data android:name="com.google.android.geo.API_KEY" android:value="your API key"/> is in the <application> element of AndroidManifest.xml

I see that problem is in the API key for google maps

https://github.com/react-native-maps/react-native-maps/blob/master/docs/installation.md#specify-your-google-maps-api-key