将内容从 ComponentDidMount 渲染到 <View>

问题描述

我该怎么做？我正在尝试渲染初始区域的内容，以便应用程序加载后它会自动获取位置的经度和纬度并显示在屏幕上。 我只是对什么以及如何去做有点困惑，因此给出了我的源代码

import React,{ Component } from 'react';
import { View,Text,StyleSheet,Dimensions } from 'react-native';
import MapView from 'react-native-maps';

export default class HomePage extends Component {
  constructor(props) {
    super(props);

  }

  componentDidMount(){
    navigator.geolocation.getCurrentPosition((position)=>{
      var lat = parseFloat(position.coords.latitude)
      var long = parseFloat(position.coords.longitude)
      var initialRegion ={
        latitude: lat,longitude: long,latitudeDelta: 0.0922,longitudeDelta: 0.0421
      }
      this.setState({ initialRegion: initialRegion })
    },(error) => aalert(JSON.stringify(error)),{
        enableHighAccuracy: true,timeout: 20000,maximumAge: 1000
      });
  }

  render() {
    return (
      <View style={styles.container}>
          <MapView style={styles.map}
            initialRegion={this.state.initialRegion}
            showsUserLocation={true}>
            </MapView>
      </View>
    );
  }
}


const styles=StyleSheet.create({
  container:{
      flex: 1,},mapContainer: {
      flex: 1,map: {
      flex: 1,width: Dimensions.get("window").width,height: Dimensions.get("window").height,}
});

关于我如何做这样的事情有任何坦率的建议吗？请协助。

解决方法

我猜你的地图加载时没有 initialRegion 因为你在第一次渲染 (componentDidMount) 之后做一个请求你可能会在你获得必要的信息之前尝试阻止地图加载，我也在构造函数上启动您的状态。代码如下所示：

    import React,{ Component } from 'react';
    import { View,Text,StyleSheet,Dimensions } from 'react-native';
    import MapView from 'react-native-maps';
    
    export default class HomePage extends Component {
      constructor(props) {
        super(props);
        this.state = {
          initialRegion: null
        }
      }
    
      componentDidMount(){
        navigator.geolocation.getCurrentPosition((position)=>{
          var lat = parseFloat(position.coords.latitude)
          var long = parseFloat(position.coords.longitude)
          var initialRegion = {
            latitude: lat,longitude: long,latitudeDelta: 0.0922,longitudeDelta: 0.0421
          }
          this.setState({ initialRegion: initialRegion })
        },(error) => aalert(JSON.stringify(error)),{
            enableHighAccuracy: true,timeout: 20000,maximumAge: 1000
          });
      }
    
      render() {
        return (
          <View style={styles.container}>
           {this.state.initialRegion !== null && (
             <MapView style={styles.map}
               initialRegion={this.state.initialRegion}
               showsUserLocation={true} />
           )}
          </View>
        );
      }
    }

祝您的项目取得成功。