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

Question

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

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

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

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

祝你的项目成功。

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

Having problems rendering contents from ComponentDidMount to <View>

react-native

components

android-mapview