L'image de fond disparaît après avoir navigué plusieurs fois Réagir natif

Question

J'ai fait une vue simple avec une image d'arrière-plan et quelques icônes sur le dessus. En cliquant sur les icônes, naviguez vers différentes pages. Cela fonctionne bien. Le problème est que lorsque je navigue vers d'autres pages, je reviens à la page d'accueil et que 7 à 8 fois l'image d'arrière-plan disparaît de tous les écrans. Ci-dessous le code de l'écran d'accueil et d'écran

<Image 
    source={require('../images/background.jpg')} 
    style={{ 
    justifyContent:'center',              
    resizeMode: "stretch", 
    height: height, 
    width: width, 
    alignItems: "center" 
    }} > 
    <StatusBar 
    backgroundColor="#4e0870" 
    barStyle="light-content" 

/> 
<Image style={{ height: 125, width: 125 }} source={require('../images/guru_logo.png')} /> 

<View style={{ 
    marginTop: 30, 
    flexDirection: 'row' 
}}> 
    <TouchableOpacity activeOpacity={.5} onPress={() => { 
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton); 
    navigate("LiveTV") 
    } 
    } 
    > 
    <Image 
     source={require('../images/live.png')} 
     style={{ 
     resizeMode: "stretch", 
     height: 75, 
     width: 75 
     }} /></TouchableOpacity> 
    <TouchableOpacity activeOpacity={.5} onPress={() => { 
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton); 
    navigate("VideoPage") 
    }}> 

    <Image 
     source={require('../images/youtube.png')} 
     style={{ 
     marginTop: 5, 

     resizeMode: "stretch", 
     marginLeft: 100, 
     height: 75, 
     width: 75 
     }} /> 
    </TouchableOpacity> 
</View> 
<View 

    style={{ 

    flexDirection: 'row', 
    marginTop: 20 
    }}> 
    <Text 
    style={{ 
     marginLeft: -5, 
     fontSize: 20, 
     color: "#FFF" 
    }}>Live Tv</Text> 
    <Text 
    style={{ 
     fontSize: 20, 
     color: "#FFF", 
     marginLeft: 125 
    }}>Video</Text> 
</View> 
<View 
    style={{ 

    flexDirection: 'row', 
    marginTop: 20 
    }}> 
    <TouchableOpacity activeOpacity={.5} onPress={() => { 
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton); 
    navigate("FacebookPage") 
    }}> 
    <Image 
     source={require('../images/facebook-logo.png')} 
     style={{ 
     resizeMode: "stretch", 
     height: 75, 
     width: 75 
     }} /></TouchableOpacity> 
    <TouchableOpacity activeOpacity={.5} onPress={() => { 
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton); 
    navigate("AudioPage") 
    }}> 
    <Image 
     source={require('../images/icon.png')} 
     style={{ 
     resizeMode: "stretch", 
     marginLeft: 100, 
     height: 75, 
     width: 75 
     }} /></TouchableOpacity> 
</View> 
<View 
    style={{ 

    flexDirection: 'row', 
    marginTop: 20 
    }}> 
    <Text 
    style={{ 
     marginLeft: -20, 
     fontSize: 20, 
     color: "#FFF" 
    }}>Facebook</Text> 

    <Text 
    style={{ 
     fontSize: 20, 
     color: "#FFF", 
     marginLeft: 110 
    }}>Audio</Text> 
</View> 

<TouchableOpacity activeOpacity={.5} onPress={() => { 
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton); 
    navigate("ContactPage") 
}}> 
    <Image 
    source={require('../images/contact.png')} 
    style={{ 


     marginTop: 20, 
     resizeMode: "stretch", 
     height: 75, 
     width: 75 
    }} /></TouchableOpacity> 
<Text style={{ 
    fontSize: 20, 
    color: "#FFF" 
}}>Contact Us</Text> 
</Image>   

Answer 1

Chaque fois que vous accédez à cet écran, il appelle une réengendrer. Je travaille autour j'ai trouvé dans le passé est de définir vos sources d'image en tant que variable, et simplement le référencer dans la section source = {HERE}. J'ai fourni un exemple de code ci-dessous. Cela a réglé ce problème dans le passé, laissez-moi savoir comment ça se passe.

var images = { 
    live: {img: require('../images/live.png')}, 
    guru: {img: require('../images/guru_logo.png')}, 
    background: {img: require('../images/background.jpg')}, 
    //and so on 
} 

class SelectionScreen extends Component { 
    //all your other code 

puis dans vos Image composants

<Image source = {images[background].img}.../> 

Answer 2

Je pense qu'il pourrait être lié à cette question réagir natif: https://github.com/facebook/react-native/issues/13600

Je voudrais essayer de:

• Run l'application sur différents téléphones/émulateurs pour voir si cela dépend de de vice spécifications (comme RAM et autres). Si l'application est à la fois pour Android et iOS, je voudrais également essayer de voir si c'est le même comportement sur les deux plates-formes;
• Remplacez temporairement les images par d'autres images plus petites/plus grandes pour voir si cela change le problème;
• Mettez à niveau React Native si nécessaire et utilisez le composant BackgroundImage pour les images d'arrière-plan au lieu de Image.