Question

在此问题上，我将非常感谢。

基本上，我正在尝试通过var1和var2将当前的纬度和经度传递到初始区域的坐标中。但是，运行此代码后，将出现一条错误消息，指出警告：道具类型失败：道具initialRegion.latitude在MapView中标记为必需，但其值为undefined

。

我已经将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>
    );
  }

根据当前位置设置地图区域

1 个答案: