React：如何使用用户当前位置的更新状态而不是初始状态

Question

我正在为我的应用程序使用React-native-maps。我制作了假的 json 餐厅数据并获取了该数据，并使用Marker 显示在我的地图上。在 React-native-maps 中有一个道具名称 initialRegion 我在其中放置了硬编码的初始状态。我使用expo-location & expo-permission 来显示用户的当前位置。

我想显示用户当前位置和餐馆之间的距离，为此我使用了一个名为geolib 的包。所有的逻辑工作正常。但问题是当我渲染应用程序时，它会显示用户的硬编码初始状态，5 秒后状态得到更新，然后我可以看到准确的当前位置。我想等待用户当前位置的更新状态。但我不知道该怎么做。

我还在Expo-Snack 中分享我的代码。 Ps: it only works on Android and ios' on snack 这是我的代码

    import React, {useState, useEffect,useCallback} from 'react';
import { Dimensions, StatusBar, StyleSheet, Text,
  TextInput, TouchableOpacity, View, Button, FlatList } from 'react-native';
import Mapview,{ Marker, Callout, PROVIDER_GOOGLE} from 'react-native-maps' 
import * as Location from 'expo-location';
import * as Permissions from 'expo-permissions';
import datas from './components/datas.json'
import { getDistance, getPreciseDistance } from 'geolib';

export default function App() {
  const [state, setstate] = useState({
    "latitude": 60.1098678,
    "longitude": 24.7385084,
    "latitudeDelta": 1,
    "longitudeDelta": 1
  });

  useEffect(() => {
    _onMapReady();
  }, [_onMapReady]);

  const _onMapReady = useCallback(async () => {
    const { status } = await Permissions.askAsync(Permissions.LOCATION);
    if (status !== `granted`) {
    }
    const location = await Location.getCurrentPositionAsync({ "accuracy": Location.Accuracy.High });
    setstate({
      ...state,
      "latitude": location.coords.latitude,
      "longitude": location.coords.longitude
    });
  }, [state]);
    const { latitude, longitude } = state;
       const propertiesInRegion = datas.data.map((location) => {
        const dis = getPreciseDistance( 
          { "latitude": location.location.lat, "longitude": location.location.lng },
          { latitude, longitude }

        );
        return {
          ...location,
          "distance": dis / 1000 
        };
      });

  return (
    <View style={styles.container}>
    <Mapview
        provider={PROVIDER_GOOGLE}
        initialRegion={state}
        showsIndoors={true}
        showsMyLocationButton={true}
        zoomControlEnabled={true}
        zoomEnabled={true}
        zoomTapEnabled={true}
        showsScale={true}
        showsBuildings={true}
        showsUserLocation={true}
        showsCompass={true}
        onMapReady={_onMapReady}
    
        style={styles.mapStyle}>
        {
          datas.data?.map((i) => {
            return (
              <Marker
                coordinate={{
                  "latitude": i.location.lat,
                  "longitude": i.location.lng
                }}
                animation={true}
                key={i.id}
               
              >
                <Callout
                  style={{ "width": 100, "height": 50 }}>
                  <View>
                    <Text>{i.Property}</Text>
                  </View>
                </Callout>
              </Marker>
            );
          })
        }
        
      </Mapview>

      
      <FlatList
       style={styles.flatList}
       data={propertiesInRegion}
       renderItem={({item})=>{
         return <React.Fragment>
         <Text style={styles.text}>{item?.Property}</Text>
         <Text>{item.distance}</Text>
         </React.Fragment>
       }}
      />
     
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    "flex": 1,
    "alignItems": `center`,
    "justifyContent": `center`

  },
 text:{
    color: "white", 
    fontSize:15,
    marginBottom:10
  },
 
  mapStyle: {
    "height": Dimensions.get(`window`).height,
    "width": Dimensions.get(`window`).width
  },
  flatList: {
    "position": `absolute`,
    "bottom": 32,
    "width": 300,
    "height": 200,
    "borderRadius": 24,
    "justifyContent": `center`,
    "alignItems": `center`, 
    backgroundColor:"#5F4B8BFF",
    
  }, 
 
});

Answer 1

@HussainSherwani

我将 mapRef 设为 null 并在地图视图中传递了 ref={mapRef} 然后这样调用它：

  const mapRef = React.useRef(null);
  useEffect(() => {
    animateToRegion();
  },
  [state, animateToRegion]);
  const animateToRegion = useCallback(() => {
    mapRef?.current?.animateToRegion(state, 1000);
  }, [state]);

我使用可选链接来消除未定义的错误。但问题还是显示了初始状态。如何在状态更新时显示ActivityIndicator。