React native React native-每封邮件发送照片

我试图通过邮件发送最近在应用程序中捕获的照片，但遇到以下错误：

index.ios.bundle:28842Exception '-[MFMailComposeInternalViewController addAttachmentData:mimeType:fileName:] attachment must not be nil.' was thrown while invoking mail on target RNMail with params (
        {
        attachment =         {
            name = Ladunek;
            path = "assets-library://asset/asset.JPG?id=3B7DBB2E-1271-4D86-A5F2-A0CEEE7CC4DE&ext=JPG";
            type = jpg;
        };
        body = "body";
        isHTML = 1;
        recipients =         (
            "placeholder@mail.com"
        );
        subject = Ladunek;
    },
    9
)

（对于邮件功能，我使用此模块：

var Mailer=require（'NativeModules'）.RNMail；

我正试图借助此模块通过邮件发送照片，但出现以下错误：

index.ios.bundle:28842Exception '-[MFMailComposeInternalViewController addAttachmentData:mimeType:fileName:] attachment must not be nil.' was thrown while invoking mail on target RNMail with params (
        {
        attachment =         {
            name = Ladunek;
            path = "assets-library://asset/asset.JPG?id=3B7DBB2E-1271-4D86-A5F2-A0CEEE7CC4DE&ext=JPG";
            type = jpg;
        };
        body = "body";
        isHTML = 1;
        recipients =         (
            "placeholder@mail.com"
        );
        subject = Ladunek;
    },
    9
)

这是调用代码：

.then((data, path) => {
        console.log(data)
        console.log(data.path)
        Mailer.mail({
          subject: 'Ladunek',
          recipients: ['placeholder@mail.com'],
          body: 'body',
          isHTML: true, // iOS only, exclude if false
          attachment: {
            path: data.path,  // The absolute path of the file from which to read data.
            type: 'jpg',   // Mime Type: jpg, png, doc, ppt, html, pdf
            name: 'Ladunek',   // Optional: Custom filename for attachment
          }
        }, (error, event) => {
            if(error) {
              AlertIOS.alert('Error', 'Could not send mail. Please send a mail to support@example.com');
            }
        });
      })

路径无效吗？或者可能是其他原因

编辑

我正在使用此模块获取文件路径

react-native-camera

像这样：

活动：

takePicture() {
    this.camera.capture()
      .then((data, path) =>

要素：

<Camera
              ref={(cam) => {
                this.camera = cam;
              }}
              style={{
                    flex: 1,
                    justifyContent: 'flex-end',
                    alignItems: 'center',
                    height: 400,
                    width: Dimensions.get('window').width
                  }}
              aspect={Camera.constants.Aspect.fill}>
              <Text style={{
                        flex: 0,
                        backgroundColor: '#fff',
                        borderRadius: 5,
                        color: '#000',
                        padding: 10,
                        margin: 40
                      }} onPress={this.takePicture.bind(this)}>{cameraIcon}</Text>
            </Camera>

{
这个摄像头=凸轮；
}}
风格={{
弹性：1，
justifyContent:“柔性端”，
对齐项目：“居中”，
身高：400，
宽度：维度。获取（'window'）。宽度
}}
aspect={Camera.constants.aspect.fill}>
{cameraIcon}

更新2

在包含for uri到路径的转换后，我现在收到以下错误：

ExceptionsManager.js:76 JSON value '<null>' of type NSNull cannot be converted to NSString

ExceptionManager.js:76 NSNull类型的JSON值“”无法转换为NSString

我是否从以下代码中“删除”了错误的行/

Obj-c文件内容：

#import "RCTBridgeModule.h"
#import <AssetsLibrary/AssetsLibrary.h>
#import <UIKit/UIKit.h>
@interface ReadImageData : NSObject <RCTBridgeModule>
@end

@implementation ReadImageData

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(readImage:(NSString *)input callback:(RCTResponseSenderBlock)callback)
{

  // Create NSURL from uri
  NSURL *url = [[NSURL alloc] initWithString:input];

  // Create an ALAssetsLibrary instance. This provides access to the
  // videos and photos that are under the control of the Photos application.
  //ALAssetsLibrary *library = [[ALAssetsLibrary alloc] init];

  // Using the ALAssetsLibrary instance and our NSURL object open the image.
  //[library assetForURL:url resultBlock:^(ALAsset *asset) {

    // Create an ALAssetRepresentation object using our asset
    // and turn it into a bitmap using the CGImageRef opaque type.
    //CGImageRef imageRef = [asset thumbnail];

    // Create UIImageJPEGRepresentation from CGImageRef
   // NSData *imageData = UIImageJPEGRepresentation([UIImage imageWithCGImage:imageRef], 0.1);

    // Convert to base64 encoded string
    // NSString *base64Encoded = [imageData base64EncodedStringWithOptions:0];

    callback(@[url]);

  //} failureBlock:^(NSError *error) {
    //NSLog(@"that didn't work %@", error);
  //}];



}
@end

#导入“RCTBridgeModule.h”
#进口
#进口
@接口ReadImageData:NSObject
@结束
@ReadImageData的实现
RCT_导出_模块（）；
RCT_导出_方法（readImage:（NSString*）输入回调：（RCTresResponseSenderBlock）回调）
{
//从uri创建NSURL
NSURL*url=[[NSURL alloc]initWithString:input]；
//创建一个库实例。这提供了对
//由照片应用程序控制的视频和照片。
//AlassetLibrary*library=[[AlassetLibrary alloc]init]；
//使用AlassetLibrary实例和NSURL对象打开图像。
//[库资产FORURL:url结果块：^（ALAsset*资产）{
//使用我们的资源创建一个表示对象
//并使用CGImageRef不透明类型将其转换为位图。
//CGImageRef imageRef=[资产缩略图]；
//从CGImageRef创建UIImageJPEG表示
//NSData*imageData=UIIMAGEJPEG表示法（[UIImage imageWithCGImage:imageRef]，0.1）；
//转换为base64编码字符串
//NSString*base64Encoded=[imageData base64EncodedStringWithOptions:0]；
回调（@[url]）；
//}故障块：^（N错误*错误）{
//NSLog（@“无法工作%@”，错误）；
//}];
}
@结束

----下面编辑的答案----

好的，我终于有了一台Mac电脑，并且能够更详细地研究这个问题

这是我在Android和iOS上发现的

假设您正在与一起使用

-1：绝对路径

将属性

captureTarget={Camera.constants.captureTarget.disk}

添加到

Camera

组件，如下所示：

<Camera
  captureTarget={Camera.constants.CaptureTarget.disk}
  ref={(cam) => {
    this.camera = cam;
  }}
  style={styles.preview}
  aspect={Camera.constants.Aspect.fill}>
  <Text style={styles.capture} onPress={this.takePicture.bind(this)}>[CAPTURE]</Text>
</Camera>

当Android和iOS都工作时，您应该有如下功能：

以下是工作代码：

var Mailer = require('NativeModules').RNMail;
import Camera from 'react-native-camera';

import React, {Component} from 'react';
import
{
  View,
  TouchableHighlight,
  Text,
  StyleSheet,
  Dimensions,
  CameraRoll
}
from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
    height: Dimensions.get('window').height,
    width: Dimensions.get('window').width
  },
  capture: {
    flex: 0,
    backgroundColor: '#fff',
    borderRadius: 5,
    color: '#000',
    padding: 10,
    margin: 40
  }
});

class SendPhoto extends Component {
  takePicture() {
    this.camera.capture()
      .then((data) => {
        console.log(data.path)
        Mailer.mail({
          subject: 'Ladunek',
          recipients: ['placeholder@mail.com'],
          body: 'body',
          isHTML: true, // iOS only, exclude if false
          attachment: {
            path: data.path,  // The absolute path of the file from which to read data.
            type: 'jpg',   // Mime Type: jpg, png, doc, ppt, html, pdf
            name: 'Ladunek',   // Optional: Custom filename for attachment
          }
        }, (error, event) => {
            if(error) {
              AlertIOS.alert('Error', 'Could not send mail. Please send a mail to support@example.com');
            }
        })
      })
      .catch(err => console.error(err));
  }

  render() {
    return(
      <View>
        <View style={styles.container}>
          <Camera
            captureTarget={Camera.constants.CaptureTarget.disk}
            ref={(cam) => {
              this.camera = cam;
            }}
            style={styles.preview}
            aspect={Camera.constants.Aspect.fill}>
            <Text style={styles.capture} onPress={this.takePicture.bind(this)}>[CAPTURE]</Text>
          </Camera>
        </View>
      </View>
    );
  }
}
export default SendPhoto;

var-Mailer=require（'NativeModules'）.RNMail；
从“react native Camera”导入相机；
从“React”导入React，{Component}；
进口
{
看法
触控高光，
文本，
样式表，
尺寸，
摄影师
}
从“反应本机”；
const styles=StyleSheet.create({
容器：{
弹性：1
},
预览：{
弹性：1，
justifyContent:“柔性端”，
对齐项目：“居中”，
高度：尺寸。获取（“窗口”）。高度，
宽度：维度。获取（'window'）。宽度
},
捕获：{
弹性：0，
背景颜色：“#fff”，
边界半径：5，
颜色：“#000”，
填充：10，
差额：40
}
});
类SendPhoto扩展组件{
拍照{
this.camera.capture（）
。然后（（数据）=>{
console.log（data.path）
邮件({
主题：“Ladunek”，
收件人：['placeholder@mail.com'],
正文：“正文”，
isHTML:true，//仅限iOS，如果为false则排除
附件:{
path:data.path，//从中读取数据的文件的绝对路径。
类型：“jpg”，//Mime类型：jpg、png、doc、ppt、html、pdf
名称：'Ladunek'，//可选：附件的自定义文件名
}
}，（错误、事件）=>{
如果（错误）{
AlertIOS.alert（'错误'，'无法发送邮件。请向发送邮件support@example.com');
}
})
})
.catch（err=>console.error（err））；
}
render（）{
返回(
{
这个摄像头=凸轮；
}}
style={style.preview}
aspect={Camera.constants.aspect.fill}>
[捕获]
);
}
}
导出默认SendPhoto；

------下面是旧答案------

我以前从未使用过这个模块，但看起来它需要文件的绝对路径，而您提供的是文件uri

您如何获取此文件uri

尝试使用react native get real path模块查看是否有帮助，您可以在此处找到它：

---

i、 e.转换文件uri以获得真实路径，并将其用作路径

谢谢您的回答-我已经用我的问题来回答您的问题，我从哪里获得路径HI，是的，本地摄像头将返回图像uri，而不是真实路径。您是为Android还是iOS编写此应用程序？对于Android，我提到的模块应该是ld做这个把戏。不幸的是，它目前不支持为iOS转换uri。如果你将camera roll与react native camera结合使用，你可以尝试iOS：实际上我需要它：）-我会查看你的链接谢谢你camera roll不只是一些图库访问吗？这是否意味着我必须保存图像->然后单独访问图库才能获得路径？是否可能，外部应用程序无法访问

路径，因为