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

Posted 2021-04-15

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

答案

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

另一答案

我认为它可能与这个反应原生问题有关：https://github.com/facebook/react-native/issues/13600

我会尝试：

• 在不同的手机/仿真器上运行应用程序，看它是否取决于设备规格（如RAM和其他）。如果该应用适用于android和ios，我也会尝试在两个平台上查看它是否相同;
• 用其他一些较小/较大的图像替换临时图像，以查看它是否以某种方式改变了问题;
• 必要时升级React Native并使用BackgroundImage组件替换图像而不是Image。