React Native中如何获取截图路径用于邮件附件？

我来帮你搞定这个问题！你当前的核心问题是没有把截图生成的URI保存到组件的state中，导致handleEmail里拿不到有效的截图路径。下面是具体的修改方案：

步骤1：初始化组件state #

首先确保你的类组件初始化了存储截图URI的state字段：

constructor(props) {
  super(props);
  this.state = {
    imageUri: '' // 初始化截图路径为空
  };
}

步骤2：修改takeSnap函数，保存截图URI到state #

调整截图逻辑，把captureScreen返回的uri存入state，这样后续邮件功能就能直接调用：

takeSnap() { 
  const albumName = "ShilpaMela"; 
  captureScreen({ format: "jpg", quality: 0.8 }) 
    .then(uri => {
      // 把截图的本地URI保存到state
      this.setState({ imageUri: uri });
      // 链式调用保存到相册
      return CameraRollExtended.saveToCameraRoll({ uri: uri, album: albumName }, 'photo');
    })
    .then(() => {
      console.log("截图已成功保存到相册");
    })
    .catch(error => console.error("Oops, snapshot failed", error)); 
}

这里要注意：captureScreen返回的uri就是截图的本地绝对路径，直接可以作为邮件附件的path使用。

步骤3：优化handleEmail函数，确保路径有效 #

在发送邮件前先判断截图路径是否存在，避免空路径导致的错误，同时给附件添加明确的文件名：

handleEmail = () => {
  // 先检查是否已有截图
  if (!this.state.imageUri) {
    Alert.alert("提示", "请先截取屏幕截图再发送邮件！");
    return;
  }

  Mailer.mail({ 
    subject: 'Help', 
    recipients: ['support@example.com'], 
    ccRecipients: ['supportCC@example.com'], 
    bccRecipients: ['supportBCC@example.com'], 
    body: '<b>A Bold Body </b>', 
    isHTML: true, 
    attachment: { 
      path: this.state.imageUri, // 直接使用state中存储的截图路径
      type: 'jpg', 
      name: 'screen_snapshot.jpg' // 自定义附件文件名，收件人查看更清晰
    } 
  }, (error, event) => { 
    Alert.alert( 
      error ? "邮件发送失败" : "邮件发送成功",
      event, 
      [ {text: 'Ok', onPress: () => console.log('OK: Email Response')} ], 
      { cancelable: true } 
    ); 
  }); 
}

关键说明 #

• captureScreen返回的uri是截图文件的本地绝对路径，完全符合邮件附件对path参数的要求
• 一定要保证调用handleEmail之前，takeSnap已经执行完成且state.imageUri被成功赋值
• 添加文件名能让收件人更清楚附件内容，建议不要留空

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