¿Hay alguna manera de verificar si la imagen se cargó antes de navegar a una página?
Si mi imagen se carga desde una URL y luego se muestra en segundo plano, recibo errores aleatorios que dicen que ImageBackground no está definido.
Redux muestra la imagen existente en la tienda, pero sigo recibiendo el error al navegar a la página:
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> </> ); };Podría intentar renderizar condicionalmente el componente.
Ejemplo:
{ url !== undefined && <ImageBackground>}Si eso no funciona, también podría crear un envoltorio de componente personalizado para su componente que devolvería una imagen predeterminada si la otra no está definida.
Ejemplo:
const ImageBackgroundWrapper = () => { if (url === undefined) { return (); } else { return (); } }