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

问题描述：

我用一个背景图像和一些图标做了一个简单的视图。点击图标导航到不同的页面。它工作正常。问题是，当我导航到其他页面返回到主页并且执行此操作时，背景图像从所有屏幕消失了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>

不确定，但有时它发生在仿真器中测试时，尝试创建发布版本，然后测试相同。如果问题仍然存在，则需要检查代码/ css。 –

我已经在设备上使用版本构建和测试 –

您是否偶然使用了webpack？ – foobar

答

每次你导航到该屏幕，它要求重新绘制。我工作过，我发现过去是将你的图像源定义为一个变量，并且只需在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

我想尝试：

运行该应用程序在不同的手机/模拟器上查看是否取决于 de副规格（如RAM和其他）。如果应用程序适用于Android和iOS，我也会尝试查看它们在两个平台上的行为是否相同;
用一些其他较小/较大的图像替换临时图像以查看它是否以某种方式改变了问题;
如有必要，升级React Native，并使用BackgroundImage组件替代Image的背景图片。

这应该是一个评论。 – Billa

@Billa，对不起，我没有足够的声望点写评论他人的帖子。 – mihai1990

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

相关推荐