React Native iOS 14 环境下本地图片无法加载仅显示空白问题

根因说明 #

这个是iOS14适配阶段的已知问题，触发原因主要有两个：

• 你当前使用的React Native版本低于0.63.2：React Native官方直到0.63.2版本才完成iOS14的兼容适配，低版本中iOS14系统无法正确解析本地静态图片资源，会出现渲染空白的情况
• Image组件未设置明确高度：iOS14下RN的Image组件加载本地资源时不会自动根据原始宽高比计算自适应高度，仅设置宽度的话高度会默认渲染为0，自然只会显示空白

可落地解决方案 #

按优先级排序选择即可：

1. 优先升级React Native版本到0.63.2及以上，升级完成后原有代码不需要做任何修改就可以正常渲染图片，这是最彻底的修复方案
2. 如果你当前项目暂时无法升级RN版本，可以通过动态获取图片原始宽高，计算对应自适应高度来解决，示例代码如下：

import { Image, Dimensions } from 'react-native';

// 获取图片原始宽高属性
const originImg = Image.resolveAssetSource(ImagePath.headerBgImage);
// 按屏幕宽度等比例计算渲染高度
const renderHeight = (originImg.height / originImg.width) * Dimensions.get('window').width;

// 组件渲染
<Image 
  source={ImagePath.headerBgImage} 
  style={{ 
    width: "100%", 
    height: renderHeight 
  }} 
/>;

3. 临时应急修复：如果不需要严格适配图片比例，直接给Image组件加最小高度和resizeMode属性即可快速解决空白问题：

<Image 
  source={ImagePath.headerBgImage} 
  style={{ width: "100%", minHeight: 120 }} 
  resizeMode="cover"
/>;

额外排查项 #

如果上面的方案都无效，可以检查下对应图片资源是否已经正确导入到iOS项目的Assets.xcassets目录中，确保没有资源重名、缺失的问题，iOS14不允许动态读取未预先打包到项目中的本地静态资源。

内容的提问来源于stack exchange，提问作者deepanshu katyal