Hình nền biến mất sau khi điều hướng qua lại nhiều lần Phản ứng gốc

Question

Tôi đã thực hiện một giao diện đơn giản với hình nền và một số biểu tượng ở trên cùng. Nhấp vào biểu tượng điều hướng đến các trang khác nhau. Nó hoạt động tốt. Vấn đề là khi tôi điều hướng đến các trang khác trở lại trang chủ và thực hiện việc này từ 7-8 lần hình nền chỉ biến mất khỏi tất cả các màn hình. Dưới đây là mã của màn hình chủ và chụp màn hình

<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

Mỗi khi bạn điều hướng đến màn hình, mà họ gọi là tái render. Tôi làm việc xung quanh tôi đã tìm thấy trong quá khứ là để xác định nguồn hình ảnh của bạn như là một biến, và chỉ cần tham khảo nó trong phần source = {HERE}. Tôi đã cung cấp một số mã mẫu bên dưới. Điều này đã khắc phục vấn đề này trong quá khứ, hãy cho tôi biết nó như thế nào.

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 

và sau đó trong Image thành phần của bạn

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

Answer 2

tôi nghĩ rằng nó có thể liên quan đến vấn đề này phản ứng bản địa: https://github.com/facebook/react-native/issues/13600

tôi sẽ cố gắng:

• Run ứng dụng trên các điện thoại/trình giả lập khác nhau để xem ứng dụng có phụ thuộc vào de thông số kỹ thuật phó (như RAM và các thông số khác). Nếu ứng dụng dành cho cả Android và iOS, tôi cũng sẽ cố gắng xem liệu đó có phải là hành vi tương tự trên cả hai nền tảng hay không;
• Thay thế tạm thời hình ảnh bằng một số hình ảnh nhỏ hơn/lớn hơn khác để xem hình ảnh có thay đổi theo cách nào đó vấn đề hay không;
• Nâng cấp phản ứng Gốc nếu cần và sử dụng thành phần BackgroundImage cho hình nền thay vì Hình ảnh.