[英]React native, ImageBackground check image has loaded before navigating to page
Is there a way I can check if the image has loaded before navigating to a page?有没有一种方法可以在导航到页面之前检查图像是否已加载?
My image if loaded from a url then displayed to the background, I get random errors saying ImageBackground is undefined.我的图像如果从 url 加载然后显示到背景,我会收到随机错误,说 ImageBackground 未定义。
Redux shows the image existing in the store, but I still get the error when navigating to the page: Redux 显示商店中存在的图像,但导航到该页面时仍然出现错误:
export const RescueMeLandingScreen = (props) => {
const { navigation } = props;
const {
rescueMe: {
rescueMeSplashScreen: {
backgroundImage: { url }, //https://xxx/v3/assets/bltba214d69f78d0dfb/blt90b1f745b5b348ef/62333622893506175b30a63f/xxx.png
buttonText,
informationText,
title: pageTitle,
},
},
} = useSelector((state) => state);
...
return (
<>
<RACPageStructure loading={false} title={pageTitle} isMain>
<ScrollView contentContainerStyle={styles.scollView}>
<ImageBackground source={{ uri: url }} style={styles.imageBackground}>
...
</ImageBackground>
</ScrollView>
</RACPageStructure>
</>
);
};
You could try conditionally rendering the component.您可以尝试有条件地渲染组件。
Example:例子:
{ url !== undefined && <ImageBackground>}
If that doesn't work, you could also create a custom component wrapper for your component that would return a default image if the other one is undefined.如果这不起作用,您还可以为您的组件创建一个自定义组件包装器,如果另一个未定义,它将返回一个默认图像。
Example:例子:
const ImageBackgroundWrapper = () => {
if (url === undefined) {
return ();
} else {
return ();
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.