javascript - 有没有办法让 React Native 中的地图和当前位置加载更快？

Question

我在堆栈管理器中有 4 个地图屏幕，让我的用户在完成任务时可以看到他们的当前位置。在他们完成一项任务后，它会将他们发送到下一个地图屏幕，直到该任务完成。从一个地图屏幕到另一个地图屏幕有时会出现大量延迟（10 秒）。当应用程序重新加载其当前位置时，我实现了一个 ActivityIndi​​cator，它将一直运行到函数挂载。然后，当他们离开时，该函数会卸载并触发加载其当前位置的下一页的安装，然后重复。有没有办法加快这个过程并使地图加载更快？

编辑：到目前为止，我已经关闭了 trackViewChanges。我目前使用的是图标，而不是自定义标记的图像。我尝试在开发模式下运行以查看它是否会运行得更快（基于一些报告），但它不会影响其渲染能力。

编辑 2：这是我用来生成用户当前位置的一些代码。

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,
           longitude: user_longitude,
           error: position_error,
         }}
         
        >
        </Marker>
      </MapView>

      <View style = { styles.blank }>
      
      <View style = {{flex:1, justifyContent: 'center', alignItems: 'center', 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',
    },


  
});

标签： javascriptreact-nativeexporeact-native-mapscurrentlocation