如何增加 React-Native-Maps 加载时间？

问题描述

我的应用可让用户在完成任务时查看他们的位置。用户完成他们的任务后，他们将被导航到下一个地图屏幕，直到该任务完成。这一直持续到他们的任务完成（在第 4 个地图屏幕之后）。为了防止内存泄漏，我使用了一个挂载/卸载组件，并且还实现了一个 ActivityIndi​​cator 在地图加载时呈现，但它可能需要最多 10 秒，这在他们正在执行任务时不太理想。

到目前为止，我已经关闭了 trackViewChanges，为我的自定义标记使用了一个图标，并尝试在 expo 中以开发模式运行，因为所有这些都声称可以减少延迟时间，但都没有奏效。下面是用于隔离用户位置的代码，加上安装和卸载组件。从一个地图屏幕到另一个屏幕都是一样的。

我应该如何减少延迟时间？

   function Screen({navigation}) { 
    const [user_latitude,setUserLatitude] = useState(0)
    const [user_longitude,setUserLongitude] = useState(0)
    const [position_error,setPositionError] = useState(null)
    const [ isLoading,setIsLoading ] = useState(true)
    const [ location,setLocation ] = useState(null);

  const renderLoading = () =>  {
        if (isLoading) {
            return (
            <View style = {{flex:1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#d3d3d3',height: height*0.75,width: width}}>
            <ActivityIndicator
            color = 'black'
            size = 'large'
            animated = {false}
          />
          <Text style = { styles.text }>{i18n.t('')}</Text>
          </View>
            );
        }else {
            return null;
        }
    }

useFocusEffect( 
      React.useCallback(()=> {

      let isActive = true;

      const fetchGeoPosition = () => {
        navigator.geolocation.getCurrentPosition(
        position => { 
          if (isActive){
          setUserLatitude(position.coords.latitude);
          setUserLongitude(position.coords.longitude);
          setPositionError(null);
          console.log('Location Accessed')
        } 
        setIsLoading(false)

      },error => isActive && setPositionError(error.message),{enableHighAccuracy: true,timeout: 0,maximumAge: 1000} 
      ); 
    }
    const permission_get = async () => {
      if (Platform.OS === 'android' && !Constants.isDevice) {
        setErrorMsg(
          'Oops,this will not work on Snack in an Android emulator. Try it on your device!'
        );
        return;
      }
      let { status } = await Location.requestPermissionsAsync();
      if (status !== 'granted') {
        setErrorMsg('Permission to access location was denied');
        console.log('Not permitted')
        return;
      }

      let location = await Location.getCurrentPositionAsync({});
      setLocation(location);
      console.log('Permitted')
    }

    permission_get()
    fetchGeoPosition()

      return () =>{
        isActive = false
        console.log('Location Severed')
    }


        },[],),)



  if (!exercise.trim()){
    return;
  }
  Alert.alert(
    (i18n.t('')),(i18n.t('')),[
    {
      text: (i18n.t('')),onPress: () => navigation.navigate('Screen2')
    },{
      text: (i18n.t('')),}]
    )
}


  return(
      <View style = {styles.container}>

      <View style = {styles.header}>
       <MapView
        provider={PROVIDER_GOOGLE}
        style={styles.map}
        region= {{
        latitude: user_latitude,longitude: user_longitude,latitudeDelta: 0.0451,longitudeDelta: 0.0451
      }}>
      
        <Marker 
        coordinate={ 

          {latitude: user_latitude,error: position_error,}}
         
        >
        </Marker>
      </MapView>

      <View style = { styles.blank }>
      
      <View style = {{flex:1,backgroundColor: '#fff' }}>
      {(renderLoading())}
      </View>

    </View>
    </View> 
      </View> 
  )
}

export {Screen};

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


const styles = StyleSheet.create({
 container: {
      flex: 1,flexDirection: 'column',backgroundColor: '#fff',},});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）