javascript - 位置+ map View - ComponentWillMount 在渲染之前解析？ react native |世博会

Question

我有时可以获得正确的位置，大多数时候在状态更新之前，render() 会调用获取空状态。

我尝试添加异步+等待条件但无济于事。一旦位置数据设置为状态，我如何确保 map 渲染。

这是代码。

那么，我是否可以在某个地方放置 nexttick() 左右以确保更新的状态用于渲染？

import React, { Component } from "react";
import {Platform,Text,Image,View,StyleSheet,Dimensions} from "react-native";
import { MapView, Constants, Location, Permissions } from "expo";

const { width, height } = Dimensions.get("window");

const SCREEN_HEIGHT = height;
const SCREEN_WIDTH = width;
const ASPECT_RATIO = width / height;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

export default class ComplaintScreen extends Component {
  state = {
    location: null,
    errorMessage: null,
    
    positionState: {
      latitude: 0,
      longitude: 0,
      latitudeDelta: 0,
      longitudeDelta: 0
    },

    markerPosition: {
      latitude: 0,
      longitude: 0
    }
  };

  async componentWillMount() {
    if (Platform.OS === "android" && !Constants.isDevice) {
      this.setState({
        errorMessage:
          "Oops, this will not work on Sketch in an Android emulator. Try it on your device!"
      });
    } else {
      await 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(
      {
        enableHighAccuracy: true, timeout:5000, maxiumumAge: 10000
      });
    this.setState({ location });
    var lat = parseFloat(location.coords.latitude);
    var long = parseFloat(location.coords.longitude);

   
    var region = {
      latitude: lat,
      longitude: long,
      latitudeDelta: LATITUDE_DELTA,
      longitudeDelta: LONGITUDE_DELTA
    };
     this.setState({ positionState: region });
     this.setState({ markerPosition: region });
  };


 render() {
    return (
      console.log(this.state.positionState),
      <View style={Styles.container}>
        <MapView style={Styles.map} initialRegion={this.state.positionState}>
          <MapView.Marker coordinate={this.state.markerPosition}>
            <View style={Styles.radius}>
              <View style={Styles.marker} />
            </View>
          </MapView.Marker>
        </MapView>
      </View>
    );
  }
}
const Styles = StyleSheet.create({
 {some styles were here removed to keep the post short}
});

Answer 1

作为替代方案，您可能还想使用 MapView 的引用来调用react-maps-native animateToRegion。

这是我建议的适用于我的项目的替代方案:

_getLocationAsync = async()=> {
let {status} = await Permissions.askAsync(Permissions.LOCATION);
if(status!=='granted'){
  this.setState({errorMessage:"Permissions not granted."})
}
let location = await Location.getCurrentPositionAsync({});
this.map.animateToRegion({
    latitude: location.coords.latitude,
    longitude: location.coords.longitude,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
}, 200)}

在此处查看引用: MapView API