Неудачный тип реквизита: Недопустимый реквизит `region.latitude` типа` string`, предоставленный в `MapView`, ожидаемый` номер` - PullRequest
Новая
       13

Неудачный тип реквизита: Недопустимый реквизит `region.latitude` типа` string`, предоставленный в `MapView`, ожидаемый` номер`

0 голосов
/ 09 ноября 2019

Я использую Reaction-native 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;
...