Obraz tła znika po kilkukrotnym przewijaniu w przód iw tył React native

Question

Utworzyłem prosty widok z obrazem tła i niektórymi ikonami na wierzchu. Kliknięcie ikony powoduje przejście do różnych stron. Działa dobrze. Problem polega na tym, że kiedy przechodzę do innych stron, wracam do strony głównej i robię to przez 7-8-krotność obrazu tła po prostu znika ze wszystkich ekranów. Poniżej znajduje się kod z ekranu głównego i ekranu

<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

każdym razem przejść do tego ekranu, wywołuje ponowne renderowanie. W przeszłości odkryłem, że źródła obrazów są zmienne, i po prostu odwołaj się do nich w sekcji source = {HERE}. Podałem poniżej przykładowy kod. To rozwiązało ten problem w przeszłości, daj mi znać, jak to działa.

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 

a następnie w składnikach Image

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

Answer 2

myślę, że może to być związane z tym reagują natywne wydania: https://github.com/facebook/react-native/issues/13600

chciałbym spróbować:

• Run aplikacja na różnych telefonach/emulatorach, aby sprawdzić, czy to zależy od vice specyfikacje (jak RAM i inne). Jeśli aplikacja jest przeznaczona zarówno na system Android, jak i iOS, spróbuję sprawdzić, czy działa na obu platformach;
• Zastąp tymczasowe obrazy innymi mniejszymi/większymi obrazami, aby zobaczyć, czy w jakiś sposób to zmieni;
• Uaktualnij React Natywnie jeśli to konieczne i użyj komponentu BackgroundImage dla obrazów tła zamiast obrazu.