React Native - 通过邮件发送照片

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

（对于邮件功能，我正在使用此模块：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: ['[email protected] /cdn-cgi/l/email-protection'],
          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 [email protected] /cdn-cgi/l/email-protection');
            }
        });
      })

路径无效吗？或者可能是别的东西。

EDIT

我正在使用此模块获取文件路径react-native-camera像这样：

Event:

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

Element:

<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>

UPDATE2

包括后obj-c 文件 https://github.com/scottdixon/react-native-upload-from-camera-roll/blob/master/RCTCustom.m对于 uri 到路径的转换，我现在收到以下错误：

ExceptionsManager.js:76 JSON value '<null>' of type NSNull cannot be converted to 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

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

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

这是我在 Android 和 iOS 上找到的。

假设您正在使用反应本机相机 https://github.com/lwansbrough/react-native-camera和...一起反应本机邮件 https://github.com/chirag04/react-native-mail

- 1：绝对路径

添加属性captureTarget={Camera.constants.CaptureTarget.disk} to 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>

现在相机组件应该返回absolute文件路径而不是 uri。

So for Android你应该看到这样的东西：

"文件:///storage/emulated/0/Pictures/RCTCameraModule/IMG_20160730_060652.jpg"

代替：

"内容：//媒体/外部/图像/媒体/86"

并为iOS你应该得到这样的东西：

"/用户/安东/库/开发者/CoreSimulator/设备/9A15F203-9A58-41C5-A4FC-EA25FAAE92BD/数据/容器/数据/应用程序/79FF93F9-BA89-4F4C-8809-277BEECD447D/文档/EFFF0ECE-4063-4FE5-984E -E76506788350.jpg"

代替：

"资产库://asset/asset.JPG?id=0058FA4A-268F-408A-9150-017A3DA368D2&ext=JPG"

- 2：陷阱

iOS:

如果 Apple 的 MFMailComposeViewController 崩溃并且您看到以下错误消息：

这很可能是因为您正在运行该应用程序iOS 9模拟器。解决方案：在真实设备上测试应用程序，或下载较旧的模拟器，例如 iOS 8.4。

有关此问题的更多信息可以找到here https://stackoverflow.com/questions/32078073/mfmailcomposeviewcontroller-throws-an-error-only-in-ios-9

Android:

截至撰写本文时，Android 尚无附件支持。

解决方案：（已发布 PR 添加此功能，但如果您等不及的话）

将以下代码添加到文件中RNMAILModule.java

if (options.hasKey("attachment") && !options.isNull("attachment")) {
  i.putExtra(Intent.EXTRA_STREAM, Uri.parse(options.getMap("attachment").getString("path")));
}

当 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: ['[email protected] /cdn-cgi/l/email-protection'],
          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 [email protected] /cdn-cgi/l/email-protection');
            }
        })
      })
      .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;

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

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

您如何获取此文件 uri？

尝试使用react-native-get-real-path模块看看是否有帮助，你可以在这里找到它：反应本机获取真实路径 https://github.com/Wraptime/react-native-get-real-path

即转换您的文件 uri 以获取真实路径，并将其用作path