javascript - 在第一次尝试时反应本机地理编码而不是渲染数据

Question

我正在使用 Expo 构建带有 React 本机的 Android 应用程序。我的用户会写地址，我必须找到它的坐标才能在地图上显示路线。

正如我所见，它工作正常，但不是第一次尝试。当我按下导航到 MapScreen 的按钮时，会生成正确的值，但不会在屏幕上呈现。

当我返回并再次尝试而不进行任何更改时，它将呈现。

为什么只在第二次尝试呈现数据？是在渲染后调用了 Geocoder 函数还是有什么问题？

import MapView, { Marker } from "react-native-maps";
import MapViewDirections from "react-native-maps-directions";
import React, {useState, useEffect} from 'react';
import * as Location from 'expo-location'
import {Alert, StatusBar, StyleSheet, Text, View} from 'react-native';
import { mapStyles } from '../Styles';
import Geocoder from 'react-native-geocoding';

var distance = 0;

var originDir = {
  longitude : null,
  latitude : null,
};

var destinationDir = {
  longitude: null,
  latitude: null,
};

const GOOGLE_MAPS_APIKEY = '';

Geocoder.init(GOOGLE_MAPS_APIKEY);

function getDistance(param){
  distance = param;
}

const showMapScreen = ({route, navigation}) => {
  const {origin} = route.params;
  Geocoder.from(origin)
  .then(json => {
    var destination = json.results[0].geometry.location;
    destinationDir.longitude = destination.lng;
    destinationDir.latitude = destination.lat;
  })
  .catch(error => console.log(error));

  const [location, setLocation] = useState(null);
  const [errorMsg, setErrorMsg] = useState(null);
  useEffect(() => {
        (async () => {
          var { status } = await Location.requestForegroundPermissionsAsync();
          if (status !== 'granted') {
            setErrorMsg('Permission to access location was denied');
            return;
          }
    
          var location = await Location.getCurrentPositionAsync({});
          setLocation(location);
          originDir.longitude = location.coords.longitude;
          originDir.latitude = location.coords.latitude;
        })();
      }, []);

  return (
    <View style={mapStyles.container}>
        <MapView style={[StyleSheet.absoluteFillObject, {elevation:-1, position:"absolute"}]} initialRegion={{longitude : originDir.longitude, latitude : originDir.latitude, latitudeDelta:0, longitudeDelta:0}}  provider={MapView.PROVIDER_GOOGLE}>
          <MapViewDirections strokeWidth = {5} strokeColor="blue" lineDashPattern={[1]} origin={originDir} destination={destinationDir} apikey = {GOOGLE_MAPS_APIKEY} onReady={result => {getDistance(result.distance)}}></MapViewDirections>
          <Text style={{top:100, elevation:1, position:"absolute", width:70, height:40, fontSize:20}}>Distance: {distance} km</Text>
        </MapView>
        <StatusBar style="auto"></StatusBar>
    </View>);
}

export {showMapScreen};

感谢您的回复！

标签： javascriptandroidreact-nativemobilegoogle-geocoder