React Native react-native-maps Mapview не отображается

Я пытаюсь использовать карты airbnb react-native-maps, но карта не отображается в симуляторе. Мой код, похоже, такой же, как и другие, которые решили проблему, но симулятор — это просто пустой белый экран с красной рамкой. Из коробки Mapview работает, но я хотел бы использовать версию airbnb.

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

export default class Haulr extends Component {
  render() {
    return (
    <MapView
      initialRegion={{
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }}
    />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  map: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
});

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

reactjs maps native
person Conor Burke    schedule 17.12.2016    source источник
comment
Вам удалось это исправить? У меня сейчас такая же проблема :(   -  person Frank Lucas    schedule 02.03.2017
comment
Нашел это полезным medium.com/@suchydan/   -  person Nishchit    schedule 08.05.2017

Ответы (8)


arrow_upward
38
arrow_downward

Вы забыли добавить styles к MapView:

<MapView

  style={styles.map}

  initialRegion={{
    latitude: 37.78825,
    longitude: -122.4324,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  }}
/>

Не забудьте определить свои стили:

    const styles = StyleSheet.create({
      map: {
        ...StyleSheet.absoluteFillObject,
      },
});

Потому что для работы mapView вам нужно установить стиль MapView в абсолютную позицию с установленными верхним, левым, правым и нижним значениями. Как указано в репозитории

person Abdellah Alaoui    schedule 17.12.2016
comment
У меня это не работает, у меня почему-то белый экран с красной рамкой - person Frank Lucas; 03.03.2017
comment
Вы можете поделиться своим кодом? + какую платформу вы используете. P.S. Может лучше еще раз задать вопрос - person Abdellah Alaoui; 03.03.2017

arrow_upward
5
arrow_downward

  1. Перейдите в консоль Google Cloud Platform. https://cloud.google.com/console/google/maps-apis/overview

  2. Выберите свой проект в раскрывающемся списке на верхней панели навигации.

  3. Нажмите «Меню» и перейдите в «API и службы»> «Библиотека».

  4. Активируйте «Maps SDK для Android» и «Maps SDK для iOS».

  5. Затем создайте новый ключ API и добавьте его в свой проект в теге AndroidManifest.xml внутри тега <application>:

<meta-data
  android:name="com.google.android.geo.API_KEY"
  android:value="YOUR_ANDROID_KEY"/>
person Uladzislau Ulasenka    schedule 10.04.2020

arrow_upward
0
arrow_downward

Я запутался с моим ключом API Google, я перегенерировал и в консоли разработчика Google прикрепил ключ SHA, и это сработало.

person amit pandya    schedule 14.01.2020

arrow_upward
0
arrow_downward

Убедитесь, что вы используете ключ Android (в моем случае я использовал неправильный ключ). В учетных данных внутри Google Cloud Platform скопируйте ключ Android и вставьте в AndroidManifest.xml.

<meta-data
  android:name="com.google.android.geo.API_KEY"
  android:value="YOUR_ANDROID_KEY"/>
person MarckSi    schedule 10.04.2020

arrow_upward
0
arrow_downward

вы должны придать стиль MapView

<MapView
  style={{flex:1}}
  region={{latitude: 52.5200066,
  longitude: 13.404954,
  latitudeDelta: 0.005,
  longitudeDelta: 0.005}}
   />

Здесь значение flex равно 1, поэтому карта видна на весь экран.

person Manan Gadhiya    schedule 22.01.2021

arrow_upward
-1
arrow_downward

Причина, по которой вы видите рамку с красной рамкой вокруг пустой карты, заключается в том, что, скорее всего, в package.json вам нужно указать версию >=0.12.4, а НЕ ^0.12.4 (что означает совместимость с 0.12.4) . Так что ищите раздел dependencies и переходите от

"dependencies": {
    "react": "15.4.2",
    "react-native": "0.41.2",
    "react-native-maps": "^0.12.4",
    ....
},

to

"dependencies": {
    "react": "15.4.2",
    "react-native": "0.41.2",
    "react-native-maps": ">=0.12.4",
    ....
},

Затем выполните следующую команду:

$ npm update
$ react-native link
$ cd ios
$ touch Podfile

Скопируйте и вставьте пример подфайла в свой Подфайл. Измените цель и сохраните файл. Затем запустите

$ pod install

Возможно, вам также придется добавить атрибут стиля в ваш MapView:

<MapView style={styles.map}
   initialRegion={{
    ... 
   }}
/>

Кредит принадлежит этому посту

person Kevin Le - Khnle    schedule 12.03.2017

arrow_upward
-1
arrow_downward

У меня была эта проблема, и все, что мне нужно было сделать, это перекомпилировать проект. Как только я это сделал, красная рамка исчезла, и я получил карту для рендеринга.

person chapeljuice    schedule 31.05.2017

arrow_upward
-1
arrow_downward

Решение: включите биллинг в своей учетной записи платформы Google Cloud.

В основном вы должны следовать этому руководству: https://docs.expo.io/versions/latest/sdk/map-view/

Затем вам нужно включить Maps SDK для Android (или iOS), а затем включить выставление счетов. Даже если Maps SDK для Android абсолютно бесплатен, им нужна ваша кредитная карта. После этого он будет работать нормально.

person mr22    schedule 14.06.2021