在React Native中将图像附加到电子邮件中（使用rn-image-picker＆amp; rn-mail）

时间：2017-11-02 23:38:55

标签： ios email react-native email-attachments

11/04更新：

我已经使用应用程序创建了一个repo，以便在下面演示此问题。任何想要安装和使用它的人都可以在这里找到... https://github.com/geirman/react-native-photo-emailer

我一起使用以下套餐尝试从图库中选择图像（或使用相机拍摄图像），然后将该照片附加到电子邮件中。

以下代码在Android上运行良好，但无法在iOS上附加图像。 

import ImagePicker from 'react-native-image-picker';
handleAndroid = (subject, to) => {
  var pickerOptions = {
    title: 'Select Avatar',
    storageOptions: {
      skipBackup: true,
      path: 'images'
    }
  };

  ImagePicker.showImagePicker(pickerOptions, (response) => {
    const { uri, type, path } = response;
    this.sendMail(subject, to, path, type);
  });
}

sendMail方法看起来像这样（减去错误处理以简化）

import Mailer from 'react-native-mail';
sendMail = (subject, to, uri, type) => {
  Mailer.mail({
    subject,
    recipients: [to],
    body: 'Optional Comment: ',
    attachment: {
      path: uri,
      type: type,
      name: subject
    },
    isHTML: true
  }
}

请注意，attachment.path必须是附件的完整文件路径。对于Android，结果是response.path，但iOS仅返回response.uri。

对于iOS的sendMail方法，我删除了attachment.name和attachment.type，因为它们没有被返回，只留下attachment.path设置为response.uri }。

response.path（在Android上）看起来像这样（ 此作品 ）... 

/storage/emulated/0/DCIM/Camera/IMG_20171102_11304344.jpg

response.uri（在iOS上）看起来像这样（response.path在iOS上没有返回任何内容）... 

file://var/mobile/Containers/Data/Application/983938D-5304-463C-BD05-D033E55F5BEB/Documents/images/224CA6DD-5299-48C3-A7CF-0B645004535F.jpg

但根据React native - send photo per mail，我想要的东西看起来更像这样（在iOS上）...... 

/Users/anton/Library/Developer/CoreSimulator/Devices/9A15F203-9A58-41C5-A4FC-EA25FAAE92BD/data/Containers/Data/Application/79FF93F9-BA89-4F4C-8809-277BEECD447D/Documents/EFFF0ECE-4063-4FE5-984E-E76506788350.jpg

所以我的问题是，如何从上面的response.uri值获取iOS上图像的完整路径。换句话说，我如何从ImagePicker返回的内容（例如/Users/anton...）中获得看起来更像RNMail所需的内容（例如file://var/mobile...）？

更新

我忘了提到我在实际设备上运行这些测试。 Android Moto Z和iPhone 5s。这是必要的，因为在测试相机和电子邮件功能时，模拟器是无用的。

这是我的与一个会话相关的xcode日志的转储：initialize app＆gt;从图库中选择照片＆gt;电子邮件打开（没有附加）＆gt;取消＆gt;删除草稿（抛出＆＃39;电子邮件无法发送＆＃39;错误，即使我发送它我收到此错误，虽然电子邮件确实发送了）

2017-11-02 20:12:45.310 [info][tid:main][RCTCxxBridge.mm:187] Initializing <RCTCxxBridge: 0x1c01b5fc0> (parent: <RCTBridge: 0x1c00babe0>, executor: (null))
2017-11-02 20:12:45.314031-0700 RNMail[434:92814] Initializing <RCTCxxBridge: 0x1c01b5fc0> (parent: <RCTBridge: 0x1c00babe0>, executor: (null))
2017-11-02 20:12:45.421 [warn][tid:main][RCTBridge.m:121] Class RCTCxxModule was not exported. Did you forget to use RCT_EXPORT_MODULE()?
2017-11-02 20:12:45.421568-0700 RNMail[434:92814] Class RCTCxxModule was not exported. Did you forget to use RCT_EXPORT_MODULE()?
2017-11-02 20:12:45.492 [warn][tid:main][RCTModuleData.mm:69] Module RNMail requires main queue setup since it overrides `init` but doesn't implement `requiresMainQueueSetup. In a future release React Native will default to initializing all native modules on a background thread unless explicitly opted-out of.
2017-11-02 20:12:45.492054-0700 RNMail[434:92814] Module RNMail requires main queue setup since it overrides `init` but doesn't implement `requiresMainQueueSetup. In a future release React Native will default to initializing all native modules on a background thread unless explicitly opted-out of.
2017-11-02 20:12:45.504 [info][tid:main][RCTRootView.m:301] Running application RNMail ({
    initialProps =     {
    };
    rootTag = 1;
})
2017-11-02 20:12:45.503900-0700 RNMail[434:92814] Running application RNMail ({
    initialProps =     {
    };
    rootTag = 1;
})
2017-11-02 20:12:45.537105-0700 RNMail[434:92814] refreshPreferences: HangTracerEnabled: 0
2017-11-02 20:12:45.537237-0700 RNMail[434:92814] refreshPreferences: HangTracerDuration: 500
2017-11-02 20:12:45.537355-0700 RNMail[434:92814] refreshPreferences: ActivationLoggingEnabled: 0 ActivationLoggingTaskedOffByDA:0
=================================================================
Main Thread Checker: UI API called on a background thread: -[UIApplication applicationState]
PID: 434, TID: 92857, Thread name: com.facebook.react.JavaScript, Queue name: com.apple.root.default-qos.overcommit, QoS: 21
Backtrace:
4   RNMail                              0x000000010026d2bc RCTCurrentAppBackgroundState + 220
5   RNMail                              0x000000010026c7f8 -[RCTAppState constantsToExport] + 68
6   RNMail                              0x0000000100275af4 -[RCTModuleData gatherConstants] + 724
7   RNMail                              0x0000000100275ea8 -[RCTModuleData exportedConstants] + 36
8   RNMail                              0x00000001002d312c _ZN8facebook5react15RCTNativeModule12getConstantsEv + 216
9   RNMail                              0x000000010035764c _ZN8facebook5react14ModuleRegistry9getConfigERKNSt3__112basic_stringIcNS2_11char_traitsIcEENS2_9allocatorIcEEEE + 5864
10  RNMail                              0x000000010038d8e0 _ZN8facebook5react16JSCNativeModules12createModuleERKNSt3__112basic_stringIcNS2_11char_traitsIcEENS2_9allocatorIcEEEEPK15OpaqueJSContext + 492
11  RNMail                              0x000000010038c5a0 _ZN8facebook5react16JSCNativeModules9getModuleEPK15OpaqueJSContextP14OpaqueJSString + 640
12  RNMail                              0x00000001003708c0 _ZN8facebook5react11JSCExecutor15getNativeModuleEP13OpaqueJSValueP14OpaqueJSString + 268
13  RNMail                              0x000000010037313c _ZZN8facebook5react12_GLOBAL__N_119exceptionWrapMethodIXadL_ZNS0_11JSCExecutor15getNativeModuleEP13OpaqueJSValueP14OpaqueJSStringEEEEPFPKS4_PK15OpaqueJSContextS5_S7_PS9_EvEN11funcWrapper4callESC_S5_S7_SD_ + 356
14  JavaScriptCore                      0x000000018df6cdc4 <redacted> + 336
15  JavaScriptCore                      0x000000018d950394 <redacted> + 3952
16  JavaScriptCore                      0x000000018e052a94 <redacted> + 10612
17  JavaScriptCore                      0x000000018e056a94 <redacted> + 26996
18  JavaScriptCore                      0x000000018e056a94 <redacted> + 26996
19  JavaScriptCore                      0x000000018e056a94 <redacted> + 26996
20  JavaScriptCore                      0x000000018e056a94 <redacted> + 26996
21  JavaScriptCore                      0x000000018e056a94 <redacted> + 26996
22  JavaScriptCore                      0x000000018e056a94 <redacted> + 26996
23  JavaScriptCore                      0x000000018e056a94 <redacted> + 26996
24  JavaScriptCore                      0x000000018e04ff50 <redacted> + 272
25  JavaScriptCore                      0x000000018df35b94 <redacted> + 136
26  JavaScriptCore                      0x000000018df0cb28 <redacted> + 11244
27  JavaScriptCore                      0x000000018dc011ac _ZN3JSC8evaluateEPNS_9ExecStateERKNS_10SourceCodeENS_7JSValueERN3WTF8NakedPtrINS_9ExceptionEEE + 316
28  JavaScriptCore                      0x000000018df6a558 JSEvaluateScript + 448
29  RNMail                              0x00000001002fcc58 _ZN8facebook5react14evaluateScriptEPK15OpaqueJSContextP14OpaqueJSStringS5_ + 100
30  RNMail                              0x000000010036d494 _ZN8facebook5react11JSCExecutor21loadApplicationScriptENSt3__110unique_ptrIKNS0_11JSBigStringENS2_14default_deleteIS5_EEEENS2_12basic_stringIcNS2_11char_traitsIcEENS2_9allocatorIcEEEE + 2528
31  RNMail                              0x0000000100384d14 _ZZN8facebook5react16NativeToJsBridge15loadApplicationENSt3__110unique_ptrINS0_17JSModulesUnbundleENS2_14default_deleteIS4_EEEENS3_IKNS0_11JSBigStringENS5_IS9_EEEENS2_12basic_stringIcNS2_11char_traitsIcEENS2_9allocatorIcEEEEEN3$_0clEPNS0_10JSExecutorE + 1372
32  RNMail                              0x00000001003847ac _ZNSt3__128__invoke_void_return_wrapperIvE6__callIJRZN8facebook5react16NativeToJsBridge15loadApplicationENS_10unique_ptrINS4_17JSModulesUnbundleENS_14default_deleteIS7_EEEENS6_IKNS4_11JSBigStringENS8_ISC_EEEENS_12basic_stringIcNS_11char_traitsIcEENS_9allocatorIcEEEEE3$_0PNS4_10JSExecutorEEEEvDpOT_ + 84
33  RNMail                              0x0000000100383da0 _ZNSt3__110__function6__funcIZN8fa2017-11-02 20:12:46.253004-0700 RNMail[434:92857] [reports] Main Thread Checker: UI API called on a background thread: -[UIApplication applicationState]
PID: 434, TID: 92857, Thread name: com.facebook.react.JavaScript, Queue name: com.apple.root.default-qos.overcommit, QoS: 21
Backtrace:
4   RNMail                              0x000000010026d2bc RCTCurrentAppBackgroundState + 220
5   RNMail                              0x000000010026c7f8 -[RCTAppState constantsToExport] + 68
6   RNMail                              0x0000000100275af4 -[RCTModuleData gatherConstants] + 724
7   RNMail                              0x0000000100275ea8 -[RCTModuleData exportedConstants] + 36
8   RNMail                              0x00000001002d312c _ZN8facebook5react15RCTNativeModule12getConstantsEv + 216
9   RNMail                              0x000000010035764c _ZN8facebook5react14ModuleRegistry9getConfigERKNSt3__112basic_stringIcNS2_11char_traitsIcEENS2_9allocatorIcEEEE + 5864
10  RNMail                              0x000000010038d8e0 _ZN8facebook5react16JSCNativeModules12createModuleERKNSt3__112basic_stringIcNS2_11char_traitsIcEENS2_9allocatorIcEEEEPK15OpaqueJSContext + 492
11  RNMail                              0x000000010038c5a0 _ZN8facebook5react16JSCNativeModules9getModuleEPK15OpaqueJSContextP14OpaqueJSString + 640
12  RNMail                              0x00000001003708c0 _ZN8facebook5react11JSCExecutor15getNativeModuleEP13OpaqueJSValueP14OpaqueJSString + 268
13  RNMail                              0x000000010037313c _ZZN8facebook5react12_GLOBAL__N_119exceptionWrapMethodIXadL_ZNS0_11JSCExecutor15getNativeModuleEP13OpaqueJSValueP14OpaqueJSStringEEEEPFPKS4_PK15OpaqueJSContextS5_S7_PS9_EvEN11funcWrapper4callESC_S5_S7_SD_ + 356
14  JavaScriptCore                      0x000000018df6cdc4 <redacted> + 336
15  JavaScriptCore                      0x000000018d950394 <redacted> + 3952
16  JavaScriptCore                      0x000000018e052a94 <redacted> + 10612
17  JavaScriptCore                      0x000000018e056a94 <redacted> + 26996
18  JavaScriptCore                      0x000000018e056a94 <redacted> + 26996
19  JavaScriptCore                      0x000000018e056a94 <redacted> + 26996
20  JavaScriptCore                      0x000000018e056a94 <redacted> + 26996
21  JavaScriptCore                      0x000000018e056a94 <redacted> + 26996
22  JavaScriptCore                      0x000000018e056a94 <redacted> + 26996
23  JavaScriptCore                      0x000000018e056a94 <redacted> + 26996
24  JavaScriptCore                      0x000000018e04ff50 <redacted> + 272
25  JavaScriptCore                      0x000000018df35b94 <redacted> + 136
26  JavaScriptCore                      0x000000018df0cb28 <redacted> + 11244
27  JavaScriptCore                      0x000000018dc011ac _ZN3JSC8evaluateEPNS_9ExecStateERKNS_10SourceCodeENS_7JSValueERN3WTF8NakedPtrINS_9ExceptionEEE + 316
28  JavaScriptCore                      0x000000018df6a558 JSEvaluateScript + 448
29  RNMail                              0x00000001002fcc58 _ZN8facebook5react14evaluateScriptEPK15OpaqueJSContextP14OpaqueJSStringS5_ + 100
30  RNMail                              0x000000010036d494 _ZN8facebook5react11JSCExecutor21loadApplicationScriptENSt3__110unique_ptrIKNS0_11JSBigStringENS2_14default_deleteIS5_EEEENS2_12basic_stringIcNS2_11char_traitsIcEENS2_9allocatorIcEEEE + 2528
31  RNMail                              0x0000000100384d14 _ZZN8facebook5react16NativeToJsBridge15loadApplicationENSt3__110unique_ptrINS0_17JSModulesUnbundleENS2_14default_deleteIS4_EEEENS3_IKNS0_11JSBigStringENS5_IS9_EEEENS2_12basic_stringIcNS2_11char_traitsIcEENS2_9allocatorIcEEEEEN3$_0clEPNS0_10JSExecutorE + 1372
32  RNMail                              0x00000001003847ac _ZNSt3__128__invoke_void_return_wrapperIvE6__callIJRZN8facebook5react16NativeToJsBridge15loadApplicationENS_10unique_ptrINS4_17JSModulesUnbundleENS_14default_deleteIS7_EEEENS6_IKNS4_11JSBigStringENS8_ISC_EEEENS_12basic_stringIcNS_11char_traitsIcEENS_9allocatorIcEEEEE3$_0PNS4_10JSExecutorEEEEvDpOT_ + 84
33  RNMail                              0x0000000100383da0 _ZNSt3__110__function6__funcIZN8fa
2017-11-02 20:12:46.621 [info][tid:com.facebook.react.JavaScript] Running application "RNMail" with appParams: {"rootTag":1,"initialProps":{}}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
2017-11-02 20:12:46.621391-0700 RNMail[434:92857] Running application "RNMail" with appParams: {"rootTag":1,"initialProps":{}}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
2017-11-02 20:12:47.742027-0700 RNMail[434:92844] [] nw_connection_get_connected_socket 4 Connection has no connected handler
2017-11-02 20:12:47.742187-0700 RNMail[434:92844] TCP Conn 0x1c4170200 Failed : error 0:61 [61]
2017-11-02 20:12:50.900283-0700 RNMail[434:92848] [] nw_connection_get_connected_socket 5 Connection has no connected handler
2017-11-02 20:12:50.900432-0700 RNMail[434:92848] TCP Conn 0x1c0171400 Failed : error 0:61 [61]
2017-11-02 20:12:53.627866-0700 RNMail[434:92814] [MC] System group container for systemgroup.com.apple.configurationprofiles path is /private/var/containers/Shared/SystemGroup/systemgroup.com.apple.configurationprofiles
2017-11-02 20:12:53.628903-0700 RNMail[434:92814] [MC] Reading from public effective user settings.
2017-11-02 20:12:54.060535-0700 RNMail[434:92843] [] nw_connection_get_connected_socket 6 Connection has no connected handler
2017-11-02 20:12:54.060707-0700 RNMail[434:92843] TCP Conn 0x1c416e400 Failed : error 0:61 [61]
2017-11-02 20:12:57.279004-0700 RNMail[434:92847] [] nw_connection_get_connected_socket 7 Connection has no connected handler
2017-11-02 20:12:57.279148-0700 RNMail[434:92847] TCP Conn 0x1c0172b40 Failed : error 0:61 [61]
2017-11-02 20:13:00.409536-0700 RNMail[434:92848] [discovery] errors encountered while discovering extensions: Error Domain=PlugInKit Code=13 "query cancelled" UserInfo={NSLocalizedDescription=query cancelled}
2017-11-02 20:13:00.429314-0700 RNMail[434:93038] [] nw_connection_get_connected_socket 8 Connection has no connected handler
2017-11-02 20:13:00.429401-0700 RNMail[434:93038] TCP Conn 0x1c0171c40 Failed : error 0:61 [61]
2017-11-02 20:13:00.827 [info][tid:com.facebook.react.JavaScript] 'Response = ', { fileSize: 508257,
  data: REMOVED_BASE64_STRING
  timestamp: '2017-10-25T02:51:35Z',
  uri: 'file:///var/mobile/Containers/Data/Application/144D1C48-C6D5-475A-891A-F75360CD64E2/Documents/images/0EF09235-6E04-4799-86F5-3E996ED4E439.jpg',
  origURL: 'assets-library://asset/asset.JPG?id=EF345E7A-2DF1-49CA-875D-4208976A635B&ext=JPG',
  isVertical: false,
  height: 768,
  width: 1024,
  fileName: 'IMG_0003.JPG' }
2017-11-02 20:13:00.888025-0700 RNMail[434:92857] 'Response = ', { fileSize: 508257,
  data: REMOVED_BASE64_STRING
2017-11-02 20:13:00.974189-0700 RNMail[434:92814] [MC] Filtering mail sheet accounts for bundle ID: org.reactjs.native.example.RNMail, source account management: 1
2017-11-02 20:13:00.985481-0700 RNMail[434:92814] [MC] Filtering mail sheet accounts for bundle ID: org.reactjs.native.example.RNMail, source account management: 1
2017-11-02 20:13:01.834117-0700 RNMail[434:92814] [MC] Lazy loading NSBundle MobileCoreServices.framework
2017-11-02 20:13:01.843828-0700 RNMail[434:92814] [MC] Loaded MobileCoreServices.framework
2017-11-02 20:13:04.218796-0700 RNMail[434:93034] [] nw_connection_get_connected_socket 9 Connection has no connected handler
2017-11-02 20:13:04.218943-0700 RNMail[434:93034] TCP Conn 0x1c01747c0 Failed : error 0:61 [61]
2017-11-02 20:13:07.341962-0700 RNMail[434:93036] [] nw_connection_get_connected_socket 10 Connection has no connected handler
2017-11-02 20:13:07.342107-0700 RNMail[434:93036] TCP Conn 0x1c0172540 Failed : error 0:61 [61]
2017-11-02 20:13:08.605 [info][tid:com.facebook.react.JavaScript] null
2017-11-02 20:13:08.606476-0700 RNMail[434:92857] null
2017-11-02 20:13:10.469212-0700 RNMail[434:93034] [] nw_connection_get_connected_socket 11 Connection has no connected handler
2017-11-02 20:13:10.469352-0700 RNMail[434:93034] TCP Conn 0x1c4174280 Failed : error 0:61 [61]
2017-11-02 20:13:11.144 [info][tid:com.facebook.react.JavaScript] OK: Email Error Response
2017-11-02 20:13:11.144088-0700 RNMail[434:92857] OK: Email Error Response
2017-11-02 20:13:13.599247-0700 RNMail[434:93036] [] nw_connection_get_connected_socket 12 Connection has no connected handler
2017-11-02 20:13:13.599391-0700 RNMail[434:93036] TCP Conn 0x1c0175480 Failed : error 0:61 [61]

更新11/7/2017

在@ Artal的建议中，我开始深入研究Xcode调试器。我发现attachmentPath被fileData分配为NSData类型，然后用于将照片实际附加到电子邮件中。但是，虽然看起来正好正确地分配了fileData，但只要我在代码中再进一步，然后以某种方式fileData = nill。这是一些跨代码的屏幕截图。

enter image description here

3 个答案:

答案 0 :(得分：2)

@Artal让我走上了正确的道路，但这是最终解决问题的代码......

Replace Line 82 of RNMail.m 

NSData *fileData = [NSData dataWithContentsOfFile:attachmentPath];

使用此代码... 

// Get the URL string, which is *not* a path (e.g. because it's file:// based)
NSString *attachmentURLString = [RCTConvert NSString:options[@"attachment"][@"path"]];
// Create a URL from the string
NSURL *attachmentURL = [[NSURLComponents componentsWithString:attachmentURLString] URL];

// Get the resource path and read the file using NSData
NSError *error = nil;
NSData *fileData = [NSData dataWithContentsOfURL:attachmentURL options:0 error:&error];

if(fileData == nil) {
    // handle error
}

有关此解决方案的详细信息，请参阅NSData Assignment Vanishes (becomes nil) Directly After Assigned

答案 1 :(得分：1)

react-native-mail正在使用NSData方法dataWithContentsOfFile为您提供的path参数中的电子邮件创建附件数据（请参阅here ）。 dataWithContentsOfFile接收基于字符串的绝对路径，而不是您尝试使用的基于路径的文件网址。

在模拟器上使用时，/Users/anton/Library/Developer...提供的“正确”路径是本地路径。在真实设备上，您可以期望它看起来类似于您提供的文件路径，该文件路径位于应用程序的沙盒文档文件夹中。顺便提一下，origURL是内部资产库数据库的URL，无法直接加载。

只需从字符串中删除file:/方案即可解决您的问题。

答案 2 :(得分：-1)

我正在使用图片的base64内容而不是网址。可能你可以创建一个具有相同base64内容的附件，毕竟电子邮件附件的工作方式

相关问题
最新问题