如何解决如何增加 React-Native-Maps 加载时间?
我的应用可让用户在完成任务时查看他们的位置。用户完成他们的任务后,他们将被导航到下一个地图屏幕,直到该任务完成。这一直持续到他们的任务完成(在第 4 个地图屏幕之后)。为了防止内存泄漏,我使用了一个挂载/卸载组件,并且还实现了一个 ActivityIndicator 在地图加载时呈现,但它可能需要最多 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 举报,一经查实,本站将立刻删除。