点击 MapView 时 React Native APK 崩溃（使用 React Native 地图 - React Native Expo）平台：Android

Question

描述：

我目前正在开发一个包含 React Native Maps 库的 React Native 项目。但是，我遇到了一个问题：一旦单击 MapView 组件，APK 就会崩溃。

代码片段：

import { View, Text, TouchableOpacity, Image } from "react-native";
import React, { useState, useEffect } from "react";
import axios from "axios";
import {
  HStack,
  Spinner,
  Heading,
  Select,
  Box,
  CheckIcon,
  Slider,
} from "native-base";
import youAreHere from "../../assets/youAreHere.png";
import getDirections from "react-native-google-maps-directions";
import { getDistance } from "../../utils";
import YouAreHere from "./YouAreHere";
// react-native-maps -> package to display the Map.
// expo-location -> get current location in terms of coordinates.
import MapView, { Marker, Polyline } from "react-native-maps";
import * as Location from "expo-location";

const Map = () => {
  const [currentLocation, setCurrentLocation] = useState(null);
  const [groupDetails, setGroupDetails] = useState(null);
  const [allMarkers, setAllMarkers] = useState(null);
  const [activeGroup, setActiveGroup] = useState(null);
  const [distanceFilterValue, setDistanceFilterValue] = useState(10);
  const [navigationSource, setNavigationSoruce] = useState(null);
  const [navigationDestination, setNavigationDestination] = useState(null);

  useEffect(() => {
    getUserLocation();
  }, []);

  const getUserLocation = async () => {
    const { status } = await Location.requestForegroundPermissionsAsync();
    if (status !== "granted") {
      setErrorMsg("Permission to access location was denied");
    } else {
      // console.log("Location Permission Granted!");
    }
    let location = await Location.getCurrentPositionAsync();
    // Change this to the GPS Latitude and Longitude during production time.
    setCurrentLocation({
      latitude: 46.46753,
      longitude: 6.835,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    });
  };

  useEffect(() => {
    axios
      .get("https://yucca-interface.vercel.app/swissmapcoordinates")
      .then((response) => {
        console.log(response.data);
        setGroupDetails(response.data.groupDetails);
        setAllMarkers(response.data.locations);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);
  const navigate = () => {
    const data = {
      source: navigationSource,
      destination: navigationDestination,
      params: [
        {
          key: "travelmode",
          value: "driving", // may be "walking", "bicycling" or "transit" as well
        },
        {
          key: "dir_action",
          value: "navigate", // this instantly initializes navigation using the given travel mode
        },
      ],
    };
    if (navigationSource !== null && navigationDestination !== null) {
      getDirections(data);
    }
  };

  return (
    <View className="flex-1 rounded-lg bg-white">
      {allMarkers === null ? (
        <View className="flex items-center justify-center w-[100%] h-[100%]">
          <HStack space={2} className="flex items-center justify-center">
            <Spinner accessibilityLabel="Loading posts" size={30} />
            <Heading color="primary.500" fontSize="xl">
              Loading ...
            </Heading>
          </HStack>
        </View>
      ) : (
        <>
          <View className="h-[10%] flex items-center justify-around flex-row">
            <TouchableOpacity
              className="bg-blue-200 rounded-lg p-2"
              onPress={() => {
                setActiveGroup(null);
              }}
            >
              <Text style={{ fontSize: 17 }}>View All </Text>
            </TouchableOpacity>
            <View className="flex flex-row items-center justify-center space-x-3">
              <Box className="bg-blue-200 my-2 rounded-md">
                <Select
                  minWidth="100"
                  maxHeight="10"
                  placeholder="Start"
                  className="  text-center text-[15px] "
                  color="black"
                  _selectedItem={{
                    bg: "blue.100",
                    endIcon: <CheckIcon size="4" />,
                  }}
                  mt={1}
                  onValueChange={(itemValue) => {
                    console.log(itemValue);
                    setNavigationSoruce(itemValue);
                  }}
                >
                  {allMarkers.map((marker, index) => (
                    <Select.Item
                      key={index}
                      label={marker.name}
                      value={marker.coordinates}
                    />
                  ))}
                </Select>
              </Box>
              <Box className="bg-blue-200 my-2 rounded-md">
                <Select
                  minWidth="100"
                  maxHeight="10"
                  placeholder="End"
                  className="  text-center text-[15px] "
                  color="black"
                  _selectedItem={{
                    bg: "blue.100",
                    endIcon: <CheckIcon size="4" />,
                  }}
                  mt={1}
                  onValueChange={(itemValue) => {
                    console.log(itemValue);
                    setNavigationDestination(itemValue);
                  }}
                >
                  {allMarkers.map((marker, index) => (
                    <Select.Item
                      key={index}
                      label={marker.name}
                      value={marker.coordinates}
                    />
                  ))}
                </Select>
              </Box>
              <TouchableOpacity
                className="bg-blue-200 rounded-lg p-2"
                onPress={() => {
                  navigate();
                }}
              >
                <Text style={{ fontSize: 17 }}>Navigate </Text>
              </TouchableOpacity>
            </View>
            <Text style={{ fontSize: 16 }}>
              Locations within {distanceFilterValue} km
            </Text>
            <Text style={{ fontSize: 16 }}>Move The Slider</Text>
            <Slider
              defaultValue={distanceFilterValue}
              step={25}
              size="sm"
              width={100}
              Height="10"
              onChangeEnd={(finalValue) => {
                setDistanceFilterValue(finalValue / 10);
              }}
            >
              <Slider.Track>
                <Slider.FilledTrack />
              </Slider.Track>
              <Slider.Thumb />
            </Slider>
            <Box className="bg-blue-200 my-2 rounded-md">
              <Select
                selectedValue={activeGroup}
                minWidth="200"
                maxHeight="10"
                // accessibilityLabel={filterSetName}
                placeholder="Select Group"
                className="  text-center text-[15px] "
                color="black"
                _selectedItem={{
                  bg: "blue.100",
                  endIcon: <CheckIcon size="4" />,
                }}
                mt={1}
                onValueChange={(itemValue) => {
                  console.log(itemValue);
                  setActiveGroup(itemValue);
                }}
              >
                {groupDetails?.map((groupDetail, index) => (
                  <Select.Item
                    key={index}
                    label={groupDetail.groupName}
                    value={groupDetail.groupCode}
                  />
                ))}
              </Select>
            </Box>
          </View>
          <MapView
            className="flex-1 rounded-lg"
            zoomEnabled={true}
            zoomTapEnabled={true}
            initialRegion={currentLocation}
          >
            {currentLocation !== null && (
              <Marker
                title="You Are Here"
                coordinate={currentLocation}
                onPress={() => {
                  console.log("You Are Here");
                }}
              >
                <YouAreHere />
              </Marker>
            )}
            {allMarkers
              .filter((marker) => {
                if (
                  activeGroup === null &&
                  currentLocation !== null &&
                  getDistance(
                    {
                      latitude: currentLocation.latitude,
                      longitude: currentLocation.longitude,
                    },
                    marker.coordinates
                  ) < distanceFilterValue
                ) {
                  return true;
                } else if (
                  marker.groupCode === activeGroup &&
                  currentLocation !== null &&
                  getDistance(
                    {
                      latitude: currentLocation.latitude,
                      longitude: currentLocation.longitude,
                    },
                    marker.coordinates
                  ) < distanceFilterValue
                ) {
                  return true;
                } else {
                  return false;
                }
              })
              .map((marker, index) => (
                <Marker
                  key={index}
                  title={marker.name}
                  coordinate={marker.coordinates}
                  onPress={() => {
                    console.log(marker.name, marker.coordinates);
                  }}
                />
              ))}
            {navigationSource !== null &&
              navigationDestination !== null &&
              activeGroup === null && (
                <Polyline
                  coordinates={[navigationSource, navigationDestination]}
                  strokeColor="#1AA7EC" // fallback for when `strokeColors` is not supported by the map-provider
                  strokeWidth={6}
                />
              )}
          </MapView>
        </>
      )}
    </View>
  );
};

export default Map;

任何有关解决此问题的帮助或指导将不胜感激。预先感谢您！

预期行为：

我希望 MapView 组件能够正常运行，允许用户与地图交互而不会出现任何崩溃。但是，当前点击地图会触发 APK 立即崩溃。

但是代码可以使用 React Expo cli 在 Android 模拟器上正常运行

Answer 1

我也遇到了来自react-native-maps的MapView的问题，但就我而言，每次渲染地图时apk都会立即崩溃，所以我什至看不到地图。也许你有类似的问题。 在我所做的所有事情中，我认为当我将下一个代码放入 app.json 文件中的“android”选项中时，我解决了问题：

 "config": {
    "googleMaps": {
      "apiKey": "YOUR_API_KEY"
    }
  }

来源：这个 github 问题。

我还尝试了更多的事情，例如：

在 android 文件夹中添加一个“local.properties”文件，其中包含 MAPS_API_KEY=YOUR_API_KEY。

将 'com.google.android.gms:play-services-maps:18.2.0' 添加到 android 文件夹中的 build.gradle 文件作为依赖项。

在 Android 清单的应用程序标签内添加 标签。

检查您是否有 标签 在 Android 清单中的应用程序标记内。