android设备上的react-native-maps空白答案

【问题标题】：react-native-maps blank on android deviceandroid设备上的react-native-maps空白
【发布时间】：2018-07-17 09:41:45
【问题描述】：

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

我在网上搜索了问题：

API 应该没问题
样式表没问题
它正在开发 genymotion 模拟器

在安卓虚拟设备上工作

在 Expo 上完美运行，但当我从 Playstore 下载应用程序时却不行。 AndroidManifest.xml 中的元数据如下所示：

这就是 mapView 的样子：

 ` <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,
      },`

【问题讨论】：

React-native-maps Blank page Only google logo的可能重复
+1。这个问题帮助了我：|我只是忘了把 flex 放在样式中，所以地图正在加载但没有显示在屏幕上，因为 mapview 没有采用高度或宽度。我知道这是一个很小的错误。我把它放在这里是因为也许这可以帮助像我这样的初学者：|

标签： google-maps react-native react-native-maps

【解决方案1】：

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

【讨论】：

如果在 expo 上工作，很容易混淆，因为在 expo 中，应用程序使用 Maps Javascript API。但是，当您构建 apk 时，它可以与 Maps SDK for Android/iOS 一起使用。不要忘记从云控制台启用它们。
你值得一个啤酒人！我不敢相信我错过了这个

【解决方案2】：

我认为您已启用 Google Play 的应用签名服务。问题在于 expo 应用程序和独立应用程序之间的哈希值不同。

转到 Play 管理中心 -> 您的应用 -> 发布管理 -> 应用签名，然后转到 API Dashboard -> 凭据并将签名添加到您现有的凭据中。

【讨论】：

谢谢，我就试试。我必须添加哪一个？ - MD5 证书指纹 - SHA-1 证书指纹 -SHA-256 证书指纹
从 Google Play 控制台复制您的包名称和 SHA-1 签名证书指纹并将它们粘贴到 API Dashboard -> 凭据 -> 创建凭据 -> OAuth 客户端 ID
感谢您的帮助。我需要在某处生成的客户端 ID 吗？
您好，我遇到了同样的错误，这为我解决了问题。基本上，我签署了该应用程序用于开发，但没有用于生产。您应该在凭据中有两个条目。将应用签名证书 SHA-1 复制到新记录中（使用相同的包名称）。希望这会有所帮助。

【解决方案3】：

在我的情况下，我没有在主视图组件中添加 stlye，并且 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,
  },
});

【讨论】：

【解决方案4】：

我也遇到了同样的错误。查过了，是我的错。添加样式标签有效

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

【讨论】：

【解决方案5】：

可能的解决方案：

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

转到谷歌控制台 -> api 和服务 -> 面板 -> 启用 api 和服务 -> 选择谷歌地图

【讨论】：

【解决方案6】：

别忘了加provider={PROVIDER_GOOGLE} 我的代码缺少提供者。正如我所补充的，地图已成功加载。

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}
      />

【讨论】：

【解决方案7】：

此外，请检查您的 GPS 或互联网连接是否已打开。我在开发模式下遇到了同样的问题，我花了几分钟才发现我没有互联网连接或 GPS 启用。

【讨论】：

【解决方案8】：

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

react-native unlink react-native-maps

然后清理你的构建项目：

cd android
gradlew clean

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

npx react-native run-android

在 React Native 0.61 上测试

【讨论】：