跨不同Activity传递图片后无法正常显示的技术求助

嘿，我来帮你排查下这个图片传递后不显示的问题，结合你的代码，我整理了几个常见的坑和解决办法：

1. 本地静态图片传递的坑 #

看你的代码里用了require('./add1.png')当默认值，推测你传递的大概率是本地静态图片。但你知道吗？require返回的其实是React Native内部用来标识资源的数字ID，直接把这个ID通过导航参数传递的话，很容易因为序列化丢失信息，导致接收方拿到的不是有效的资源引用。

解决思路： #

别直接传require的结果，改成传图片的路径字符串，在接收页面再执行require：

• 发送页面这么传：

navigation.navigate('你的目标页面', {
  imagePath: './add1.png' // 传路径字符串就行
});

• 接收页面这么处理：

render() {
  const { navigation } = this.props;
  // 这里要注意路径的相对关系，得和发送页面的路径对应上
  const imagePath = navigation.getParam('imagePath', './add1.png');
  // 注意：require里的路径得是静态可确定的，不能完全动态拼接哦
  const imageSource = require(`${imagePath}`);
  return (
    <View style={styles.rightFolderContent}>
      <TouchableOpacity onPress={this.toggleSliderModal}>
        <Image style={{height:68,width:77}} source={imageSource} />
      </TouchableOpacity>
    </View>
  );
}

如果你的图片路径是完全动态的（比如从接口拿的），那建议提前把所有可能用到的本地图片都用require导入，然后传对应的变量就行。

2. 网络/本地文件图片的传递注意点 #

要是你传的是网络图片或者相机拍的本地文件，那得传完整的{uri: '图片地址'}对象，不能只传uri字符串。比如发送页面这么写：

navigation.navigate('你的目标页面', {
  imageSource: { uri: 'https://xxx.com/your-image.png' } // 本地文件uri也这么传
});

接收页面就可以直接用你原来的代码，只要确保拿到的是完整的{uri: ...}对象就行。

3. 先排查参数是不是真的传对了 #

你可以在接收页面先打个日志，看看拿到的image到底是什么：

render() {
  const { navigation } = this.props;
  const image = navigation.getParam('image', require('./add1.png'));
  console.log('拿到的图片源：', image); // 看看是数字ID、{uri:...}还是undefined
  // 剩下的代码不变
}

如果打印出来是undefined，那肯定是发送页面的navigate调用没传对参数，得先把传递环节搞定。

4. 样式和图片本身的小检查 #

要是参数没问题，那看看图片样式是不是有问题？比如加个resizeMode试试，有时候图片会因为尺寸适配的问题“隐身”：

<Image style={{height:68,width:77}} source={image} resizeMode="cover" />

另外也可以换一张确定能显示的图片，排除图片本身损坏的可能。

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