React Native运行报错：Image组件source属性Prop类型校验失败

这个Prop类型校验报错的核心逻辑很明确：React Native的Image组件加载本地静态打包图片时，要求source属性必须是require()/import导入图片返回的数字类型资源ID，你当前传入的值不符合这个要求。
报错定位到react.development.js里的console调用行是正常现象，那行是React开发环境打印所有警告、报错的公共入口，不是这行代码本身有问题，真正的出错点是你业务代码里写的Image组件。

常见触发场景有4种：

• 给本地静态图片传了字符串路径，比如写source="./assets/logo.png"或者source={{uri: './assets/logo.png'}}，相对路径字符串不会被打包器识别成静态资源
• 动态拼接本地图片的require路径，比如写source={require(./assets/${iconName}.png)}，RN的Metro打包器不支持动态路径的静态资源分析，拿不到正确的资源ID，最终传入的是undefined或者非预期值
• 条件渲染时分支返回值类型不统一，比如三元表达式里真分支返回require()的资源值，假分支直接返回字符串路径、null、undefined
• 错误地给本地静态资源套了uri结构，把本地图片当成网络图片写

对应上面的场景按规则修改即可：

1. 本地静态图片直接传require()的返回值，不要传字符串，不要套uri结构
   正确示例：

// 本地静态图标准写法
<Image source={require('./assets/logo.png')} />

2. 禁止动态拼接require的路径，如果需要根据变量切换不同本地图片，提前把所有用到的静态资源预导入，存在映射对象里调用
   正确示例：

// 提前把所有用到的本地图标导入，建立映射
const ICON_MAP = {
  home: require('./assets/icon-home.png'),
  user: require('./assets/icon-user.png'),
  setting: require('./assets/icon-setting.png')
}

// 使用时直接根据key取值，不要动态写require
<Image source={ICON_MAP[currentTab]} />

3. 检查条件渲染的所有分支，确保传给source的值类型统一：用本地图就所有分支都返回require()的数字资源ID，用网络图就所有分支都返回带uri字段的对象，不要混写
   错误写法对比：

// 错误：假分支传了字符串，类型不匹配
<Image source={isActive ? require('./assets/active.png') : './assets/inactive.png'} />

// 正确：两个分支都返回合法的本地资源值
<Image source={isActive ? require('./assets/active.png') : require('./assets/inactive.png')} />

4. 如果是加载网络图片、设备本地存储的绝对路径图片、base64图片，统一用{uri: '图片地址'}的对象格式传值，不要用require
   正确示例：

// 网络图/本地绝对路径图写法
<Image source={{uri: 'https://你的图片资源地址'}} />

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