Установка региона карты на основе текущего местоположения

Question

Я был бы очень признателен за помощь в этом вопросе.

В основном я пытаюсь передать мою текущую широту и долготу через var1 и var2 в координаты начальной области. Однако после выполнения этого кода появится сообщение об ошибке, в котором будет указано, что Внимание: сбойный тип проп: пропел initialRegion.latitude помечен как обязательный в MapView, но его значение равно undefined. * 1008. *

Я распечатал значения var1 и var2 для консоли, и видно, что они являются числами и определенно не определены. Может ли кто-нибудь, пожалуйста, любезно объяснить мне, что происходит и порекомендовать решение?

import React, { Component } from 'react';
import { Platform, Text, View, StyleSheet,Dimensions } from 'react-native';
import  MapView, { Marker } from 'react-native-maps';
import Constants from 'expo-constants';
import * as Location from 'expo-location';
import * as Permissions from 'expo-permissions';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = 
    {
      region : 
      {
        latitude: 1.290270,
        longitude: 103.851959,
        latitudeDelta: 0.02,
        longitudeDelta: 0.02,
      },
      location: null,
      errorMessage : null,

    }
  }
  componentWillMount() {
    if (Platform.OS === 'ios' && !Constants.isDevice) {
      this.setState({
        errorMessage: 'Oops, this will not work on Sketch in an Android emulator. Try it on your device!',
      });
    } else {
      this._getLocationAsync();
    }
  }

  _getLocationAsync = async () => {
    let { status } = await Permissions.askAsync(Permissions.LOCATION);
    if (status !== 'granted') {
      this.setState({
        errorMessage: 'Permission to access location was denied',
      });
    }

    let location = await Location.getCurrentPositionAsync({});
    this.setState({ location });
  };

  render() {
    let text = 'Waiting..';
    if (this.state.errorMessage) {
      text = this.state.errorMessage;
    } else if (this.state.location) {
      var1 = (this.state.location.coords.latitude);
      var2 = (this.state.location.coords.longitude);
      console.log(var1);
      console.log(var2 +" "+typeof(var2));

    }

    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>{this.var1, this.var2}</Text>
        <MapView 
        style={styles.mapStyle}  
        initialRegion={{latitude: this.var1,longitude: this.var2, latitudeDelta:0.02, longitudeDelta: 0.02}}
        >
            <Marker
              coordinate={{latitude: 1.290270, longitude: 103.851959}}
              title={'Singapore'}
              description={'Sg505'}
            />
        </MapView> 
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    textAlign: 'center',
  },
  mapStyle: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
});

Answer 1

Вы не определили эти var1 и var2 переменные. Вы можете определить их как переменные класса (таким образом, доступ к ним с помощью this.var1 будет работать), однако имеет смысл определить их непосредственно в функции render.

Кроме того, когда вы печатаете их значения,Text компонент ожидает строкового потомка, где вы передаете две строки. Таким образом, было бы лучше объединить эти две строки, либо с var1 + var2, либо `${var1}${var2}`

  render() {
    let var1;
    let var2;
    let text = 'Waiting..';
    if (this.state.errorMessage) {
      text = this.state.errorMessage;
    } else if (this.state.location) {
      var1 = (this.state.location.coords.latitude);
      var2 = (this.state.location.coords.longitude);
      console.log(var1);
      console.log(var2 +" "+typeof(var2));

    }

    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>{`${var1} ${var2}`}</Text>
        <MapView 
        style={styles.mapStyle}  
        initialRegion={{latitude: var1, longitude: var2, latitudeDelta:0.02, longitudeDelta: 0.02}}
        >
            <Marker
              coordinate={{latitude: 1.290270, longitude: 103.851959}}
              title={'Singapore'}
              description={'Sg505'}
            />
        </MapView> 
      </View>
    );
  }