警告：道具类型失败：未指定必需的道具 'region.latitude'

Question

我有一个问题，但我不知道它是否与此有关。

当我在 Android Studio 的 Android 模拟器上运行我的地图时，我收到此警告并且我在 Palo alto 的 Google plex 上进行地理定位而不是我的实际地理位置。是不是因为我用的是模拟器？

如果你想检查，这是我的代码：

Map.js

import React, { Component } from 'react';
import Geolocation from '../geolocation/Geolocation';
import Shops from '../shops/Shop';
import {
  Text,
  View
} from 'react-native';
import MapView from 'react-native-maps';
import styles from './Style';

class Map extends Geolocation {

  render() {
    return (
      <View>
        <MapView style={styles.map}
        region={{
          latitude: this.state.position.coords.latitude,
          latitudeDelta: 0.001,
          longitude: this.state.position.coords.longitude,
          longitudeDelta: 0.001
        }} />
        <Shops />
      </View>
    );
  }
}

export default Map;

Geolocation.js

import React, { Component } from 'react';
import styles from './Style';

class Geolocation extends Component {

    constructor(props) {
        super(props);
        this.state = {
            position : {
                coords: {}
            }
        }
    }

    componentDidMount() {
        navigator.geolocation.getCurrentPosition(
            (position) => {
                this.setState({position});
            },
            (error) => alert(error.message),
            {enableHighAccuracy: true, timeout: 20000}
        );
        navigator.geolocation.watchPosition((position) => {
            this.setState({position});
        });
    }
}

export default Geolocation;

感谢您的回答，如果您有任何想法，我对这个问题有点迷茫。

Answer 1

可以更改纬度和经度。

从 Android Studio 启动 Android 设备监视器（工具 -> Android -> Android 设备监视器）

切换到 Emulator Control 选项卡 并在 Location Controls 组中进行更改。

Answer 2

我相信这是因为你从 this.state.position.cords 对象分配 MapView 坐标，在初始渲染时 cords.latitude 和 cords.longitude 是未定义的，因此抛出 propTypes 警告。

在构造函数中初始化它们以避免这种情况。

constructor(props) {
    super(props);
    this.state = {
        position : {
            coords: {
              latitude: 0,
              longitude: 0
            }
        }
    }
}

Answer 3

只有 Android

有问题

解法：-

<MapView 
  initialRegion={{
    latitude: Number(letitude),
    longitude: Number(longitude),
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421
  }}
>

Number(你的 let 和 long) 它会转换成数字

警告：道具类型失败：未指定必需的道具 'region.latitude'

Warning: failed prop type: Required prop 'region.latitude' was not specified

javascript

reactjs

react-native

react-native-android