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

Question

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

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

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

• 在 android 虚拟设备上工作

  完美地在 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,
      },`

Answer 1

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

Answer 2

就我而言，我没有在主视图组件中添加 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,
  },
});

Answer 3

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

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