web-dev-qa-db-ja.com

React-native-maps空白のページGoogleロゴのみ

私はreact-native用のグーグルマップを1週間インストールしようとしましたが、それでも成功しません。 react-native-maps githubの問題の解決策を検索して試しましたが、それでも空白のページが表示されます。

私がやること：

react-native init myapp
npm install
yarn add react-native-maps
react-native link react-native-maps

GoogleコンソールAPI->新しいプロジェクトの作成-> Googleマップの有効化Android API、Google Maps JavaScriptAPIおよびPlacesAPI->資格情報の作成

AndroidManifest.xml内

    <application>
....
       <meta-data
          Android:name="com.google.Android.geo.API_KEY"
          Android:value="AIzaSyDRK50sPCRCPLTnyt0OUdng9cwP0eqPJq4"/>
    </application>

package.json

    {
    "name": "maps",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "jest"
    },
    "dependencies": {
        "react": "16.0.0",
        "react-native": "0.50.4",
        "react-native-maps": "^0.18.3"
    },
    "devDependencies": {
        "babel-jest": "21.2.0",
        "babel-preset-react-native": "4.0.0",
        "jest": "21.2.1",
        "react-test-renderer": "16.0.0"
    },
    "jest": {
        "preset": "react-native"
    }
}

App.js

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';
import MapView from 'react-native-maps'

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
      <MapView
        style={styles.map}
        region={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.015,
          longitudeDelta: 0.0121,
        }}
      >
      </MapView>  
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

編集：何人かの人々が私にスタックトレースを求めたので： サンプル1

androidgoogle-mapsreact-native-androidreact-native-maps
7
Стоил Янков

問題についてより良い洞察を得ることができるように、いくつかのスタックトレースを提供できますか？あなたの問題の説明はあなたの電話がインターネットに接続されていないように聞こえます、そしてこれが地図がレンダリングされない理由です。

とにかく、これが私の過去の経験に基づいてreact-native-mapsを実行するためのいくつかのヒントです。

  • 何よりもまず、公式ドキュメントに従ってAndroidアプリを構成してください ここ 。
  • Google MapsAPIキーがコンソールから生成されていることを確認してください。
  • react-native-mapsがreact-nativeバージョンと互換性があるかどうかを確認してください。
  • Android build-toolsのバージョンを確認してください。
  • Genymotion（旧バージョン）のAndroidエミュレーター）を使用している場合は、必ずGoogle Play開発者サービスを組み込んでください。そうしないと、マップが機能しません。
  • アクティブなインターネット接続。マップをロードするために電話またはエミュレーターが接続されていることを確認してください（iOSはインターネットにアクセスできなくても問題ありません）。
  • マップがどこに焦点を合わせるかがわかるように、常にlatlongオブジェクトをinitialRegionプロップに挿入します。
5
Rex Low

それを持っている友人へのアドバイス空白マップビューGoogleロゴ。私はその問題を解決するために一日中過ごしました。最後に、マップは実際には機能していることを認識しましたが、最初に実行したときは完全にズーム。空白のページだと思っていたのですが、実は空白の領域でした:)参考までに

5
yeulucay

ほとんどの場合、これは2つの問題に関連しています。

  1. APIキーが正しくありません
  2. 対応するAPIがGoogleDeveloperConsoleで有効になっていません

この記事 に従ってAPIキーを作成し、APIを有効にしました。そして、それは突然機能しました。以前は、あなたが言ったようにGoogleロゴのみを表示していました。

2
Hari Das

AndroidとiOSプラットフォームの両方でネイティブマップを反応させるのに苦労しました。

Android GoogleAPIバージョンがありました。GoogleAPI27を使用しようとしましたが、機能しませんでしたが、API 26は問題ありませんでした。 enter image description here

私が見つけたそのヒント： https://github.com/react-community/react-native-maps/issues/1877#issuecomment-353261669

IOSにはパッケージバージョンがありました：CRNAでアプリを作成したとき、react-native @ 0.52.0をインストールし、react-native-maps @ 0.20.1と互換性がなかったので、react-nativeをバージョン0.53.0に変更しました。ビルド時にアプリがクラッシュしてエラーが発生する問題を解決しました：エントリ「：CFBundleIdentifier」が存在しません。

1
Kristijan Tomić

GoogleConsoleでAPIキーがMaps SDK for Androidで機能するように有効にしてください。iOSの場合は、Maps SDK for iOSを有効にしてください。

0
teerryn

私は同じ問題に直面しました。最後に、minsdkVersionを以前の19であった18に設定した後にそれを取得しました。それは私を働いた。

0
Khushboo Tahir

私のために働く。おそらくそれはあなたのためにも働くでしょう。

1）containerStyleとViewを削除します。以下のコードを使用してください

 mapStyle: {
    height: 400,
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },

2）mapViewコードを次のように置き換えます

<MapView
      provider={PROVIDER_GOOGLE} // remove if not using Google Maps
      style={mapStyle}
      zoomEnabled={true}
      region={{
        latitude: 22.258,
        longitude: 71.19,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }}
    >
      <Marker
        coordinate={{ latitude: 22.258, longitude: 71.19 }}
        title={"title"}
        description={"test"}
      icon={image}
      />
    </MapView>
0
Pushp