如何解决React Native:在应用启动时预取数据的最佳方法
我是本机新手,我的应用程序在执行2次异步调用后显示了不同的位置(首先获取用户坐标,其次获取围绕用户坐标的位置)。
这些异步axios调用通常需要几秒钟的时间,因此,我的应用程序的第一个屏幕显示为空白,一旦解决了诺言并更新了状态,就会出现地点列表。 我正在App.js主要组件的useEffect中进行api调用。
我的问题是:是否有更好的方法在应用启动时预取数据,以避免在状态更新之前显示空白屏幕(不是很专业吧...)
App.js
function App()
{
useEffect(() =>
{
console.log('App mounted');
//Async calls,takes a few seconds and blank screen shows while the promises resolve
getCurrentCoordinates();
getLoggedUser();
},[])
const getCurrentCoordinates = async () => {
if(navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(async(position) =>
{
let myCoordinates = { lat:position.coords.latitude,lng:position.coords.longitude };
mapStore.setCurrentCoordinates(myCoordinates);
let params =
{
latlng : myCoordinates.lat+','+myCoordinates.lng,sensor : true,key : env.MAPS_KEY
};
let response = await http.get('https://maps.googleapis.com/maps/api/geocode/json?',{ params :params });
fetchMarkersFromLocation(myCoordinates);
},(error) => console.log(error.message),{ enableHighAccuracy: true,timeout: 20000,maximumAge: 1000 }
);
}
};
return (
<SafeAreaView style={[ global.androidSafeArea ]}>
<NavigationContainer>
<ROOTSTACK1></ROOTSTACK1>
</NavigationContainer>
</SafeAreaView>
);
}
export default App;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。