React Native Null 参考 - Maps &标记(安卓) [英] React Native Null Reference - Maps & Markers (Android)

问题描述

大家好，我的 Android 设备出现错误.

在 Iphone 上它运行良好，我在地图上显示了标记，但在 Android 上我收到此错误

<小时>

其他几点.

1. 您要导入 geolib 两次.你只需要做一次.你应该有 import GeoLib from 'geolib'; 或 const geolib = require('geolib'); 你不需要两者.看到您使用的是带有小写的 geolib，我只想删除 import GeoLib from 'geolib';
2. 您以错误的方式从 react-native-maps 导入 Markers.它应该作为 import { Markers } from 'react-native-maps 导入，但是您使用的是 Markers 作为 MapView.Markers绝对好.我认为您可以删除未使用和不正确的 import Markers from 'react-native-maps
3. MapView.Animated 我不是 100% 认为这是正确的或必需的.我以前从未见过它以这种方式使用.但是，如果它没有给您带来问题，那么我想这不是真正的问题.
4. 您还应该在您的标记上添加一个关键道具，以便您抑制它丢失的警告.这应该是独一无二的.

Hey Guys Iam getting an error on my Android Devices.

On Iphone it works very well I'am getting my Markers in maps but on Android iam getting this Error

Click for the Image

Since i upgraded the Code with geolib where iam filtering markers out which are not near to me it won't work on Android...

Anybody an idea?

this is my Code:

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%",
  },
})

解决方案

Your errors aren't related to your implementation of the geolib but instead they are due to your implementation of the MapView.Circle.

If we look at the documentation the MapView.Circle we see the following:

|   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)

Both the center and the radius are required fields.

If we look at your code:

<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)' }
/>

It would appear that you have set them, however you have not actually set the region. You can confirm this by checking your initial state.

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

Notice that you have not set an initial region for the map. This is what is causing your error. The app is trying to handle the undefined value for the region.

To overcome this the easiest way is to set an initial region for the map in state.

Something like this:

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

If you app is for a specific region then it may make sense to pick an initial region that is close to where you app is going to be used.

Also note in your MapView.Circle code you are also using undefined values of latitude and longitude for the key. I don't think that you need to define a key property for the MapView.Circle. I cannot find any mention of this being a requirement in the documentation.

Making the above changes allows the code to work.

---

Some other points.

1. You are importing geolib twice. You only need to do it once. You should either have import GeoLib from 'geolib'; or const geolib = require('geolib'); you don't need both. Seeing as you are using geolib with a lower case, I would just remove import GeoLib from 'geolib';
2. You are importing Markers from react-native-maps in the wrong way. It should be imported as import { Markers } from 'react-native-maps, however you are using the Markers as MapView.Markers which is absolutely fin. I think you can remove the unused and incorrect import Markers from 'react-native-maps
3. MapView.Animated I am not 100% that this is correct or required. I haven't seen it used in this way before. However if it is not causing you issues then I suppose it isn't really a problem.
4. You should also add a key prop on your Markers so that you suppress the warning that it is missing. This should be something unique.

这篇关于React Native Null 参考 - Maps &amp;标记(安卓)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！