Question

React native在我的android设备上为空白。这只是带有Google徽标的灰色屏幕。与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

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

转到Play控制台->您的应用->版本管理->应用签名，然后转到API Dashboard->凭据，然后将签名添加到您现有的凭据中。

Answer 2

如果所有其他方法都失败了（例如我的情况），请不要忘记基本内容。原来我没有在console.developers.google.com

中启用“适用于Android的Maps SDK”

Answer 3

可能的解决方案：

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

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

Answer 4

在我的情况下，我没有在主View组件中添加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 5

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

react-native unlink react-native-maps

然后清理您的构建项目：

cd android
gradlew clean

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

npx react-native run-android

在React Native 0.61上测试

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

Answer 7

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

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

Answer 8

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

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

8 个答案: