将内容从 ComponentDidMount 渲染到 <View> 时出现问题答案

【问题标题】：Having problems rendering contents from ComponentDidMount to <View>将内容从 ComponentDidMount 渲染到 <View> 时出现问题
【发布时间】：2021-04-20 05:54:46
【问题描述】：

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

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

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

【问题讨论】：

标签： react-native components android-mapview

【解决方案1】：

我猜您的地图加载时没有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>
        );
      }
    }

祝你的项目成功。

【讨论】：