MapView仅在Expo客户端可用，打包成APK后应用崩溃，求解决方案

核心原因分析 #

你遇到的问题主要是两个关键点：一是使用PROVIDER_GOOGLE时未配置专属的Google Maps API密钥（Expo客户端内置了测试密钥，但自行打包时必须用自己的密钥）；二是代码中未处理place为null的边界情况，导致MapView初始化时传入非法值。

分步解决方案 #

1. 配置Google Maps API密钥

• 原生项目（Bare Workflow）：在android/app/src/main/AndroidManifest.xml中添加密钥配置：

  <application>
    <!-- 其他配置 -->
    <meta-data
        android:name="com.google.android.geo.API_KEY"
        android:value="你的Google Maps API密钥"/>
  </application>
  

  注意：密钥需启用Maps SDK for Android，并绑定正确的APK包名和SHA-1指纹。

• Expo Managed Workflow：在app.json中添加配置：

  {
    "expo": {
      "android": {
        "config": {
          "googleMaps": {
            "apiKey": "你的Google Maps API密钥"
          }
        }
      }
    }
  }
  

2. 修复边界值处理问题

代码中place可能为null，直接访问place.latitude会引发错误，同时MapView的initialRegion不能传入undefined。优化后的代码如下：

import MapView, { Marker, PROVIDER_GOOGLE } from "react-native-maps"
import { Dimensions, ImageBackground, View } from 'react-native';
import { useContext } from 'react';
import Context from '../你的Context路径'; // 替换为实际路径

const Location = (props)=>{
    const { states } = useContext(Context)
    const place = states.place

    // 设置默认初始区域，避免place为空时出错
    const defaultRegion = {
        latitude: 39.9042, // 示例：北京纬度，可替换为你的默认坐标
        longitude: 116.4074,
        longitudeDelta: 0.01,
        latitudeDelta: 0.01
    }

    return(
        <ImageBackground
            style={{flex:1}}
            source={require('../../img/mypoint-wallpaper.jpg')}>
            <View style={styles.container}>
                <MapView 
                    style={{
                        width: Dimensions.get('window').width,
                        height: Dimensions.get('window').height
                    }}
                    provider={PROVIDER_GOOGLE}
                    showsUserLocation={true}
                    showsMyLocationButton={true}
                    initialRegion={{
                        latitude: place?.latitude || defaultRegion.latitude,
                        longitude: place?.longitude || defaultRegion.longitude,
                        longitudeDelta: defaultRegion.longitudeDelta,
                        latitudeDelta: defaultRegion.latitudeDelta
                    }}
                >
                    {
                        place?.latitude && place?.longitude && (
                            <Marker
                                title={place.nome}
                                coordinate={{
                                    latitude: place.latitude,
                                    longitude: place.longitude
                                }}
                            />
                        )
                    }
                </MapView>
            </View>
        </ImageBackground>
    )
}

const styles = {
    container: {
        flex: 1
    }
}

export default Location;

3. 检查必要权限

确保AndroidManifest.xml中添加了MapView运行所需的权限：

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.INTERNET" />

内容的提问来源于stack exchange，提问作者Fran Fí de Nena