失败的道具类型：无效的道具区域。为“地图视图”提供的“字符串”类型的“纬度”，应为“编号”`

Question

我使用的反应原生0.61和我有两个文件。正如你可以看到下面我传递位置从FethcLocation.jsapp.js文件，并分配它作为一个位置对象。然后我把它传递给userMaps.js文件，并将其分配给经度和纬度值。

警告：失败的道具类型：无效道具区域。纬度类型为字符串提供给地图视图，应为编号。

获取位置。js

import React from 'react';
import {View} from 'react-native';
navigator.geolocation = require('@react-native-community/geolocation');

class FetchLocation extends React.Component {
  componentDidMount() {
    navigator.geolocation.getCurrentPosition(
      position => {
        this.props.setLocation(position);
      },
      error => {
        console.log(error);
      },
      {enableHighAccuracy: false, timeout: 20000, maximumAge: 10000},
    );
  }

  render() {
    return <View></View>;
  }
}

export default FetchLocation;

应用程序。js

import React from 'react';
import {Button} from 'react-native';
import FetchLocation from './components/FetchLocation';
import UserMaps from './components/UserMaps';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      location: {lat: '', lon: ''},
      showTraffic: 'false',
    };
  }

  assignLocation = props => {
    this.setState({
      location: {
        lat: props.coords.latitude,
        lon: props.coords.longitude,
      },
    });
  };

  manageTraffic = () => {
    this.setState({
      showTraffic: 'true',
    });
    console.log(this.state.showTraffic);
  };

  render() {
    return (
      <>
        <Button title="Traffic" onPress={this.manageTraffic}></Button>
        <FetchLocation setLocation={this.assignLocation} />
        <UserMaps mapData={this.state} />
      </>
    );
  }
}

export default App;

用户地图。js

import React from 'react';
import {View, StyleSheet} from 'react-native';
import MapView, {PROVIDER_GOOGLE} from 'react-native-maps';

const UserMaps = props => {
  const {location, showTraffic} = props.mapData;

  return (
    <View style={styles.mapContainer}>
      <MapView
        provider={PROVIDER_GOOGLE}
        showsUserLocation={true}
        showsCompass={true}
        showsBuildings={false}
        showsTraffic={true}
        showsIndoors={true}
        style={styles.map}
        region={{
          latitude: location.lat,
          longitude: location.lon,
          latitudeDelta: 0.015,
          longitudeDelta: 0.0121,
        }}>
        {/* <MapView.Marker coordinate={(location.lat + 2, location.lon + 2)} /> */}
      </MapView>
    </View>
  );
};

const styles = StyleSheet.create({
  mapContainer: {
    width: '100%',
    height: '100%',
  },

  map: {
    height: '100%',
    width: '100%',
  },
});

export default UserMaps;

Answer 1

在变量之前添加Number（），如下所示：

region={{
      latitude: Number(location.lat),
      longitude: Number(location.lon),
      latitudeDelta: 0.015,
      longitudeDelta: 0.0121,
    }}>

或

<MapView.Marker coordinate={(
   Number(location.lat) + 2, 
   Number(location.lon) + 2
 )} />