React Native Maps渲染当前位置在我重新启动应用程序时中断

gcxthw6b  于 2023-06-06  发布在  React
关注(0)|答案(1)|浏览(211)

目前与我的应用程序,我有它,使它要求用户的位置perms,如果他们接受它,然后获取他们的位置。然而,目前,当我用一个设定的区域渲染Map时,它可以工作,当代码更改到它们的位置时,代码获取它的位置也会更改。当我重置应用程序或博览会的应用程序崩溃,因为状态是未定义的。我怎么能通过这个?下面是代码:

const Map = () => {

  // Get permissons for using user location
  const [location, setLocation] = useState();
  
  useEffect(() => {
    const getPermissions = async () => {
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        console.log("Please grant location permissions");
        return;
      }

      let currentLocation = await Location.getCurrentPositionAsync({});
      setLocation(currentLocation.coords);

      console.log("Location:");
      console.log(currentLocation);
    };
    
    getPermissions();

  }, []);

    return(
//Will change this Mapview to users current location
//Will display about 0 - 30 miles away from used depending on user settings.
    <MapView 
    initialRegion={
      { 
          //I when I restart the app with latitude and longitude as latitude: latitude: location.coords.latitude longitude: location.coords.longitude app crashes cause the state is cleared. 
          latitude: 24.8607,
          longitude: 67.0011,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
     style ={styles.map}/>
  );
}

我希望应用程序不断被设置为用户的位置,即使应用程序重新启动

blmhpbnm

blmhpbnm1#

由于您还没有为location state定义初始值,因此将使用null值对其进行初始化。因此location.coordsundefined
要解决这个问题,在向MapView组件传递纬度和经度属性时,可以检查location是否为null或undefined,并将其值传递给MapView组件。
如果您更改initialRegion属性,Map将不会重新渲染,因为它用于初始渲染。要在位置状态更新后更新Map位置,可以使用region属性。当其值更改时,它将在MapView中进行渲染。新的区域将被显示。
这可以通过如下重写props来实现:

<MapView 
    initialRegion={{ 
          latitude: !!location ? location.coords.latitude : 24.8607,
          longitude: !!location ? location.coords.longitude : 67.0011,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
     region={{ 
          latitude: !!location ? location.coords.latitude : 24.8607,
          longitude: !!location ? location.coords.longitude : 67.0011,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
     style ={styles.map}
/>

这样,一旦获得权限并使用新值更新状态,MapView将接收新的props并呈现。
在更新location之前,您应该使用initialRegion来显示默认区域。之后,region prop可以更新视图。

相关问题