React Native中如何展示存储在变量中的图片？

• props值校验问题
  首先在组件渲染逻辑中打印console.log(this.props.img)，确认传递的值和你直接硬编码写入的url完全一致，排查是否存在多余空格、换行符、转义字符，或者值为undefined、空字符串的情况。如果img是异步接口返回的数据，组件首次渲染时props还未更新，此时uri为空自然无法加载图片。
• 样式规则问题
  React Native加载网络图片时，Image组件必须设置明确的固定宽高，不能使用百分比作为宽高值。确认styles.image中同时包含有效的width和height属性，没有因为父组件的条件渲染导致样式未正确挂载。
• 异步更新未触发重渲染问题
  针对异步获取的img参数，可以添加条件渲染判断，等props有值后再渲染Image组件：

  {this.props.img && <Image style={styles.image} source={{ uri: this.props.img }} />}
  

  也可以给Image组件绑定和uri关联的key属性，强制uri变化时组件重新渲染加载新资源：

  <Image key={this.props.img} style={styles.image} source={{ uri: this.props.img }} />
  

• 本地资源路径问题
  如果你传递的uri是本地文件路径而非网络url，需要确认平台适配规则：iOS和Android的本地文件路径格式存在差异，动态传值时可能缺失file://前缀，而硬编码时你可能已经加上了正确前缀，就会出现两种写法效果不一致的情况。

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