React Native Maps在Android设备上无法显示地图

Question

我的安卓设备上React Native是空白的。它只有一个带有Google标志的灰色屏幕。与React-native-maps Blank page Only google logo不同的是，它在模拟器上工作正常，但在真实设备上却不行。

我在网上搜索了这个问题：

• The API should be fine
• stylesheet is ok
• it's working on genymotion emulator

• working on android virtual device

  Perfectly working on Expo but not when I download the app from playstore. The meta-data in AndroidManifest.xml looks like this:

  This is how the mapView looks like:

   ` <MapView
            showsUserLocation={false}
            style={styles.map}
            provider='google'
            ref={ref => { map3 = ref; }}
            onMapReady = { this.onMapReady }
            initialRegion={this.state.region}
            >
              <Marker 
              image={logo}
              coordinate={this.state.coordinate}
              />
  </MapView>`
  

..和样式：

    `const styles = StyleSheet.create({
      mapContainer: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#ecf0f1',
      },
      map: {
        flex: 1,
        borderRadius: 4,
        width,
        height,
        zIndex: 1,
      },`

- user9468014

---

可能是React-native-maps Blank page Only google logo的重复问题。 - Rex Low

+1. 这个问题帮了我：| 我只是忘记在样式中加入flex，所以地图正在加载但没有显示在屏幕上，因为mapview没有获取高度或宽度。我知道这是一个非常小的错误。我把它放在这里，因为也许这可以帮助像我这样的初学者：| - Jaydip Kalkani

Answer 1

如果其他方法都失败了，就像我的情况一样，不要忘记基本的东西。结果发现我没有在console.developers.google.com中启用“Maps SDK for Android”。

- Mwaniki Sam

---

如果在expo上工作，很容易会感到困惑，因为在expo中，应用程序使用Maps Javascript API。但是当您构建apk时，它将使用Maps SDK for Android/iOS。不要忘记从云控制台启用它们。 - viktor_vangel

你应该喝一杯啤酒！我简直不敢相信我错过了那个。 - Cristian Rojas

Answer 2

在我的情况下，我没有在主视图组件中添加样式，而MAPVIEW是在主应用视图之外渲染的。此外，我在MapView中添加了文本，只是为了测试它是否呈现任何文本？当它呈现文本时，它显示地图非常小，所以我知道这是一个样式问题。因此，我向我的视图添加了样式styles.container：

<View style={styles.container}>

        <MapView 
            style={styles.map} 
            initialRegion={{
                   latitude:this.state.latitude,
                   longitude:this.state.longitude,
                   latitudeDelta: 1,
                   longitudeDelta: 1,
            }}>

        </MapView>

        <Text>{this.state.latitude, this.state.longitude}</Text>

    </View> 

---

const styles = StyleSheet.create({
  container: {
   position: 'absolute',
   top: 0,
   left: 0,
   right: 0,
   bottom: 0,
   justifyContent: 'flex-end',
   alignItems: 'center',
 },
  map: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
});

- Ajay Rawat

Answer 3

我想你已经启用了Google Play的应用签名服务。问题在于Expo应用程序和独立应用程序之间具有不同的哈希值。

请前往Play控制台->您的应用程序->发布管理->应用签名，然后转到API仪表板->凭据，并将签名添加到现有凭据中。

- Mounish Sai

---

谢谢，我会尝试一下。我需要添加哪一个呢？

• MD5证书指纹
• SHA-1证书指纹
• SHA-256证书指纹

- user9468014

从Google Play控制台复制您的软件包名称和SHA-1签名证书指纹，然后将它们粘贴到API仪表板 ->凭据->创建凭据->OAuth客户端ID中。 - Mounish Sai

谢谢你的帮助。我需要在某个地方使用生成的客户端ID吗？ - user9468014

嗨，我遇到了同样的错误，但是我已经解决了。基本上，我的应用程序是为开发签名的，而不是为生产签名的。您应该在凭据中有两个条目。将应用程序签名证书 SHA-1 复制到新记录中（使用相同的包名称）。希望这可以帮助到您。 - Rayzor

嗨，谷歌Play商店账户需要与谷歌API账户相同吗？还是可以不同呢？ - undefined

Answer 4

我也遇到了相同的错误。 检查后发现是我的问题。添加style标签解决了问题。

{
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
}

- Tien Nguyen

Answer 5

可能的解决方案：

• 确保启用了“Google Maps Android API v2”。

前往 Google 控制台 -> API 和服务 -> 面板 -> 启用 API 和服务 -> 选择 Google 地图

- Franklin'j Gil'z

Answer 6

另外，检查一下你的GPS或者互联网连接是否已经打开。在开发模式下我也遇到了同样的问题，花费了我几分钟才发现是因为没有连接互联网或者启用GPS。

- Tomislav Brabec

Answer 7

不要忘记添加 provider={PROVIDER_GOOGLE}。 我的代码缺少了 provider。当我添加后，地图成功加载了。

import MapView, {PROVIDER_GOOGLE} from 'react-native-maps';

<MapView
        style={styles.mapcontainer}
        provider={PROVIDER_GOOGLE}
        region={{
          latitude: 42.882004,
          longitude: 74.582748,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
        zoomEnabled={true}
        showsUserLocation={true}
      />

- mitesh jnext

Answer 8

首先，使用以下命令取消链接 react-native-maps 库：

react-native unlink react-native-maps

然后清理您的构建项目：

cd android
gradlew clean

最后，重新构建项目并在 Android 设备上运行：

npx react-native run-android

测试于React Native 0.61

- Sameera Damith