React Native动态渲染本地存储头像图片不显示问题

两个核心问题导致头像加载失败：

• Metro打包器静态解析限制：React Native 中require()引入本地静态资源时，路径必须是写死的静态字符串，打包阶段就会完成资源映射，不支持传入变量、动态拼接路径，所以require(img1)这类写法无法被打包器识别，资源不会被打进包内自然加载失败。
• 渲染逻辑与source格式错误：
  1. 状态逻辑写反：选中本地头像后你调用了setChangeAvtar(false)，刚好走到渲染接口头像的分支
  2. source格式不匹配：本地静态资源通过require()引入后返回的是资源ID标识，不需要包裹{uri: xxx}结构；只有网络图片、本地缓存路径的图片才需要用{uri: 地址}的格式。

1. 提前静态引入所有本地头像资源 #

不要存储路径字符串，直接静态require资源存入常量，让打包器提前识别资源：

// 静态引入本地头像，禁止用变量存路径再动态require
const img1 = require('../../../assets/images/avatars/avatar1.png')
const img2 = require('../../../assets/images/avatars/avatar2.png')

// 组件状态
const [avatar, setAvatar] = useState() // 存储当前展示的头像资源/网络地址
const [changeAvtar, setChangeAvtar] = useState(false) // true=展示本地选中头像，false=展示接口返回头像

2. 修正选中头像的回调逻辑 #

选中本地头像后切换到对应渲染分支：

function onSelectAvatar(selectedAvatar) {
  setAvatar(selectedAvatar)
  setChangeAvtar(true) // 选中本地头像时切到本地渲染分支
}

3. 修正头像选择列表渲染 #

直接使用提前引入的静态资源作为source，不需要再套require：

<TouchableOpacity
  onPress={() => onSelectAvatar(img1)}
>
  <Image
    source={img1}
    style={{
      height: 50, width: 50, borderRadius:40,margin: 5
    }}
  />
</TouchableOpacity>
<TouchableOpacity
  onPress={() => onSelectAvatar(img2)}
>
  <Image
    source={img2}
    style={{
      height: 50, width: 50, borderRadius:40,margin: 5
    }}
  />
</TouchableOpacity>

4. 修正条件渲染的source格式 #

严格区分本地资源和网络uri的source写法：

{changeAvtar ?
  {/* 本地静态资源直接传require返回的对象 */}
  <Image
    source={avatar}
    style={styles.logo}
    resizeMode="contain"
  /> :
  {/* 接口返回的网络头像用uri格式包裹 */}
  <Image
    source={{ uri: avatar }}
    style={styles.logo}
    resizeMode="contain"
  />
}

提示：如果后续需要扩展更多本地头像，只需要新增静态require的常量即可，不要尝试用变量拼接路径动态引入，Metro打包器不支持该能力。

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