React Native中通过this.props.imageUri传递图片显示空白问题求助

问题修复方案 #

• 移除无效导入
  你的Home.js（Search组件文件）和Location.js文件都错误地从react-native中导入了不存在的imageUri对象，这个是你自定义的props字段，不属于RN官方导出内容，直接删除两个文件import语句里的imageUri项即可。
• 修正Image组件的resizeMode配置
  resizeMode是Image组件的根属性，不属于样式配置，你当前错误把它写在了style对象里，同时原有的width: null、height: null在部分flex嵌套场景下会无法正常计算尺寸，修改Location.js中的Image代码如下：

  <Image
    source={this.props.imageUri}
    resizeMode="cover"
    style={{
      flex: 1,
      width: "100%",
      height: "100%",
    }}
  />
  

• 修复无效的样式声明
  Search组件中你把StyleSheet.create的代码写在了return语句之后，这部分代码永远不会执行，要么把这段代码移到return之前，要么直接删除（当前你没有用到这段样式）。
• 验证静态资源路径
  确认require("../home/nicosia.png")的路径相对当前Search组件文件是正确的，../home目录下确实存在nicosia.png文件，路径错误也会导致图片加载空白。
• 兜底排查
  上述修改完成后如果还是无法显示，先在Location组件中直接写死source为对应图片的require语句测试，如果可以正常显示说明是props传递链路的问题，如果还是无法显示可以先给Image设置固定宽高（比如width: 100, height: 100）排查样式适配问题。

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