react-native – 在几次反复导航后,背景图像消失

我用一个背景图片和一些图标在它上面做了一个简单的视图.单击图标可导航到不同的页面.它工作正常.问题是,当我导航到其他页面返回主页并执行此操作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,marginLeft: 100,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",this.handleBackButton);
    navigate("AudioPage")
  }}>
    <Image
      source={require('../images/icon.png')}
      style={{
        resizeMode: "stretch",width: 75
      }} /></TouchableOpacity>
</View>
<View
  style={{

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

  <Text
    style={{
      fontSize: 20,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,width: 75
    }} /></TouchableOpacity>
<Text style={{
  fontSize: 20,color: "#FFF"
}}>Contact Us</Text>
</Image>

每次导航到该屏幕时,它都会调用重新渲染.我在过去找到的工作是将图像源定义为变量,并在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 source = {images[background].img}.../>