基于当前位置设置地图区域

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>
);
}