8

私はこのhttps://github.com/airbnb/react-native-mapsチュートリアルに従おうとしていますが、彼らが言ったことはすべて試しましたが、Android Studio のエミュレーターで空白の画面が表示されました。

私のスクリーンショット

私のコード:

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

import MapView from 'react-native-maps';

export default class ReactNativeMaps extends Component {
  render() {
   const { region } = this.props;
   console.log(region);

   return (
     <View style ={styles.container}>
       <MapView
         style={styles.map}
         region={{
           latitude: 39.1329,
           longitude: 84.5150,
           latitudeDelta: 0.015,
           longitudeDelta: 0.0121,
         }}
       >
       </MapView>
     </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,
  },
});

AppRegistry.registerComponent('ReactNativeMaps', () => ReactNativeMaps);

AndroidManifest.xml ファイル:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.reactnativemaps"
    android:versionCode="1"
    android:versionName="1.0">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

    <uses-sdk
        android:minSdkVersion="16"
        android:targetSdkVersion="22" />

    <application
      android:name=".MainApplication"
      android:allowBackup="true"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:theme="@style/AppTheme">
      <meta-data
     android:name="com.google.android.geo.API_KEY"
     android:value="AIzaSyC3injbScdjmMp7J5MM1GqBhSb-kulIF_8"/>
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>
4

8 に答える 8

1

実機のエミュレータ（ などGenymotion）を使用する場合は、 がインストールされていることを確認してくださいGoogle Play support。

デバイスでインターネット (GPS/Wifi/データ) が有効になっていることを確認します。

また、マップのスタイルに幅と高さを追加することを忘れないでください。

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,
    width:200,
    height:200
  }
});
于 2017-01-29T11:30:24.453 に答える
0

https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap &markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers =color:green%7Clabel:G%7C40.711614,-74.012318 &markers=color:red%7Clabel:C%7C40.718217,-73.998284 &key=YOUR_API_KEY

この静的マップを使用して API キーを確認してください

于 2021-12-23T11:19:16.220 に答える