在来回导航几次后,背景图像消失了

Question

我用一个背景图片和一些图标在它上面制作了一个简单的视图.单击图标可导航到不同的页面.它工作正常.问题是,当我导航到其他页面返回主页并执行此操作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}.../>