互联网连接中断时图像消失

【问题标题】：Image disappears when internet connection is lost互联网连接中断时图像消失
【发布时间】：2019-08-22 11:00:21
【问题描述】：

我在我的 react native 项目中将图像显示为徽标。当我有互联网连接时，它显示正常。但是，如果我关闭互联网，它就会消失。

谁能告诉我我在这里做错了什么。

renderLogo = () => {
        if(this.props.logoImage.logoImage !== null){
            return <Image style={{resizeMode: 'contain', height: 40, width: 130}} source={{uri: this.props.logoImage.logoImage.ImageVirtualPath}} />
        }
        return <Text />
    }

url = "https://reactnativecode.com/wp-content/uploads/2017/05/react_thumb_install.png"

【问题讨论】：

您正在从网站加载图像。当连接断开时，您将无法访问该网站，因此图像不会显示。尝试下载图像并从您的项目中加载它。

标签： javascript image react-native

【解决方案1】：

如果你想离线表达同样的image，你可以cacheimage。

但它只适用于iOS。而且必须加载一次。

<Image style={{resizeMode: 'contain', height: 40, width: 130}}

 source={{uri: this.props.logoImage.logoImage.ImageVirtualPath, cache: 'only-if-cached'}} />

如果你想在任何设备上运行，你可以安装和使用该模块。

你可以安装React-native-cached-image

示例

import { CachedImage } from 'react-native-cached-image';
...
<CachedImage 
  style={{
    width: 200,
    height: 200,
  }}
  source={{ uri: item.urls.raw }}
/>

【讨论】：

@sd_dewasurendra 如果我的回答有帮助，请您选择“V”标记和箭头作为我的回答吗？