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