react-native - 来回导航几次后背景图片消失 React native

Question

我做了一个简单的 View ，上面有一个背景图像和一些图标。单击图标导航到不同的页面。它工作正常。问题是当我导航到其他页面返回主页并执行此操作 7-8 次时，背景图像会从所有屏幕上消失。下面是主屏幕和截图的代码

  <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

每次导航到该屏幕时，它都会调用重新渲染。我过去发现的解决方法是将您的图像源定义为变量，并在 source = {HERE} 中简单地引用它部分。我在下面提供了一些示例代码。这在过去解决了这个问题，让我知道它是怎么回事。

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

然后在您的 Image成分

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