道具类型失败：提供给“MapView”的“字符串”类型的道具“region.latitude”无效，应为“数字”

Question

我使用的是 react-native 0.61，我有两个文件。正如您在下面看到的，我将位置从 FethcLocation.js 传递到 app.js 文件并将其分配为位置对象。然后我将它传递给 userMaps.js 文件并将其分配给经度和纬度值。但我收到一条错误消息...

Warning: Failed prop type: Invalid prop region.latitude of type string supplied to MapView, expected number.

FetchLocation.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;

app.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;

userMaps.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
 )} />

道具类型失败：提供给“MapView”的“字符串”类型的道具“region.latitude”无效，应为“数字”

Failed prop type: Invalid prop `region.latitude` of type `string` supplied to `MapView`, expected `number`

reactjs

react-native

react-native-maps