React Native Null Reference - Карты и маркеры (Android)

Question

Эй, ребята, я получаю сообщение об ошибке на моих устройствах Android.

На Iphone это работает очень хорошо. Я получаю свои маркеры на картах, но на Android я получаю эту ошибку

Нажмите на изображение

Так как я обновил Код с помощью geolib, где iam-фильтры, которые находятся рядом со мной, не будут работать на Android ...

Никому идея?

это мой код:

import React from 'react';
import MapView from 'react-native-maps';
import Marker from 'react-native-maps';
import Geolib from 'geolib';

import {
  View,
  Text,
  StyleSheet,
  Button,
} from "react-native";

const geolib = require('geolib');

class Grillplaetze extends React.Component {

  constructor() {

      super();
      this.state = {
        markers: [],
        loaded: false
      }

    }

    componentDidMount() {
      this.getPosition();
    }

    getPosition(){
  navigator.geolocation.getCurrentPosition(
    (position) => {
    console.log(position);
      this.setState({
        region: {
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
          latitudeDelta:  0.020,
          longitudeDelta:  0.020,
        }
      }, () => this.getLocations());
    },
    (error) => this.setState({ error: error.message }),
    { enableHighAccuracy: false, timeout: 200000, maximumAge: 1000 },
  );
}

    getLocations() {

  return fetch('http://media-panda.de/bp/whs.geojson')
  .then(response => response.json())
  .then(responseData => {
    let { region } = this.state;
    let { latitude, longitude } = region;

    let markers = responseData.features.map(feature =>  {
      let coords = feature.geometry.coordinates
      return {
        coordinate: {
          latitude: coords[1],
          longitude: coords[0],
        }
      }
    }).filter(marker => {
      let distance = this.calculateDistance(latitude, longitude, marker.coordinate.latitude, marker.coordinate.longitude);
      return distance <= 500;
    });

    this.setState({
      markers: markers,
      loaded: true,
    });
  }).done();
  }

  calculateDistance(origLat, origLon, markerLat, markerLon) {
    return geolib.getDistance(
      {latitude: origLat, longitude: origLon},
      {latitude: markerLat, longitude: markerLon}
    );
  }


  render() {

  return (
      <View style={styles.container}>
      <MapView.Animated
        style={styles.map}
        region={this.state.region}
        showsUserLocation={true}
      >
       {this.state.markers.map(marker => (
          <MapView.Marker
            coordinate={marker.coordinate}
          />
       ))}
       <MapView.Circle
                key = { (this.state.latitude + this.state.longitude).toString() }
                center = { this.state.region }
                radius = { 500 }
                strokeWidth = { 1 }
                strokeColor = { '#1a66ff' }
                fillColor = { 'rgba(230,238,255,0.5)' }

        />
       </MapView.Animated>
      </View>
     );
  }
}

export default Grillplaetze;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',

  },
  map: {
    width: "100%",
    height: "100%",
  },
})

Answer 1

Ваши ошибки не связаны с вашей реализацией geolib, но вместо этого они связаны с вашей реализацией MapView.Circle.

Если мы посмотрим на документацию MapView.Circle, то увидим следующее:

|   Prop   |   Type   |   Default  |                     Note                       |
|----------|----------|------------|------------------------------------------------|
| `center` | `LatLng` | (Required) | The coordinate of the center of the circle .   
| `radius` | `Number` | (Required) | The radius of the circle to be drawn (in meters)

Поля center и radius являются обязательными для заполнения.

Если мы посмотрим на ваш код:

<MapView.Circle
  key = { (this.state.latitude + this.state.longitude).toString() }
  center = { this.state.region }
  radius = { 500 }
  strokeWidth = { 1 }
  strokeColor = { '#1a66ff' }
  fillColor = { 'rgba(230,238,255,0.5)' }
/>

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

constructor () {
  super();
  this.state = {
    markers: [],
    loaded: false
  }
}

Обратите внимание, что вы не установили начальный регион для карты. Это то, что вызывает вашу ошибку. Приложение пытается обработать неопределенное значение для региона.

Чтобы преодолеть это, проще всего установить начальный регион для карты в состоянии.

Примерно так:

constructor () {
  super();
  this.state = {
    markers: [],
    loaded: false,
    region: {
      latitude: 0,
      longitude: 0,
      latitudeDelta: 0.020,
      longitudeDelta: 0.020
    },
    latitude: 1,
    longitude: 1
  };
}

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

Также обратите внимание, что в вашем коде MapView.Circle вы также используете неопределенные значения latitude и longitude для key. Я не думаю, что вам нужно определять key свойство для MapView.Circle. Я не могу найти упоминания о том, что это требование в документации.

Внесение вышеуказанных изменений позволяет коду работать.

---

Некоторые другие моменты.

1. Вы импортируете geolib дважды. Вам нужно сделать это только один раз. Вы должны иметь либо import GeoLib from 'geolib';, либо const geolib = require('geolib');, вам не нужны оба. Поскольку вы используете geolib в нижнем регистре, я бы просто удалил import GeoLib from 'geolib';
2. Вы импортируете Markers из react-native-maps неправильно. Его следует импортировать как import { Markers } from 'react-native-maps, однако вы используете Markers как MapView.Markers, что является абсолютно плавным. Я думаю, что вы можете удалить неиспользованные и неправильные import Markers from 'react-native-maps
3. MapView.Animated Я не на 100% уверен, что это правильно или требуется. Я не видел, чтобы это использовалось таким образом раньше. Однако, если это не вызывает у вас проблем, то я полагаю, что это не проблема.
4. Вы также должны добавить ключевую опору на свои Маркеры, чтобы вы подавили предупреждение, что оно отсутствует. Это должно быть что-то уникальное.