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

我認為您已啟用 Google Play 的應用簽名服務。 問題在於 expo 應用程序和獨立應用程序之間的不同哈希值。

轉至 Play 管理中心 -> 您的應用 -> 發布管理 -> 應用簽名，然后轉至API 儀表板-> 憑據並將簽名添加到您現有的憑據中。

Answer 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,
  },
});

Answer 4

可能的解決方案：

• 確保已啟用“Google Maps Android API v2”。

轉到谷歌控制台 -> api 和服務 -> 面板 -> 啟用 api 和服務 -> 選擇谷歌地圖

Answer 5

不要忘記添加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 6

我也遇到了同樣的錯誤。 檢查后，是我的錯。 添加樣式標簽有效

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

Answer 7

此外，請檢查您的 GPS 或 Internet 連接是否已打開。 我在開發模式下遇到了同樣的問題，我花了幾分鍾才弄清楚我沒有互聯網連接或啟用 GPS。

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 上測試