Question

我正在使用本机反应0.61，我得到了两个文件。如您在下面看到的，我将位置从FethcLocation.js传递到app.js文件，并将其分配为位置对象。然后，将其传递到userMaps.js文件，并将其分配给经度和纬度值。但我在说一个错误...

警告：道具类型失败：类型无效的道具region.latitude string提供给MapView，预期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”无效，预期为“数字”

1 个答案: