メール送信機能

2019-06-05

リアクトネイティブ(React Native)プロジェクトでreact-native-mailライブラリを使って端末にインストールされてあるメールアプリを起動してメールを送信してみましょう。

概要

リアクトネイティブ(React Native)でメール発信するため端末にインストールされてある基本メールアプリを起動するライブラリを紹介します。このブログではreact-native-mailライブラリを使ってメールアプリを実行してメールを発信する方法について紹介します。

インストール

リアクトネイティブ(React Native)でメールアプリを起動してメールを発信するため下記のコマンドでreact-native-mailライブラリをインストールします。

npm install --save react-native-mail

インストールが終わったら下記のコマンドでreact-native-mailをリアクトネイティブ(React Native)プロジェクトと連結します。

react-native link react-native-mail

使い方

下記に紹介する方法は公式サイトにある内容をそのままコピした内容になります。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import { View, Alert, Button } from 'react-native';
import Mailer from 'react-native-mail';

export default class App extends Component {

  handleEmail = () => {
    Mailer.mail({
      subject: 'need help',
      recipients: ['support@example.com'],
      ccRecipients: ['supportCC@example.com'],
      bccRecipients: ['supportBCC@example.com'],
      body: '<b>A Bold Body</b>',
      isHTML: true,
      attachment: {
        path: '',  // The absolute path of the file from which to read data.
        type: '',   // Mime Type: jpg, png, doc, ppt, html, pdf, csv
        name: '',   // Optional: Custom filename for attachment
      }
    }, (error, event) => {
      Alert.alert(
        error,
        event,
        [
          {text: 'Ok', onPress: () => console.log('OK: Email Error Response')},
          {text: 'Cancel', onPress: () => console.log('CANCEL: Email Error Response')}
        ],
        { cancelable: true }
      )
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <Button
          onPress={this.handleEmail}
          title="Email Me"
          color="#841584"
          accessabilityLabel="Purple Email Me Button"
        />
      </View>
    );
  }
}
  • subject: メールのタイトル
  • recipients: メールを受信するメールリスト
  • ccRecipients: ccで受信するメールリスト
  • bccRecipients: bccで受信するメールリスト
  • body: メールの本文
  • isHTML: メールの本文がHTML形式かどうか
  • attachment: 添付ファイルがある場合使う
    • path: ファイルの位置
    • type: ファイルのmime type
    • name(Optional): カスタムファイル名

下は添付ファイルの例題です。ファイルの位置はreact-native-fsを使ってファイルの位置を取得しました。

attachment: {
  path: `${RNFS.DocumentDirectoryPath}/${file.name}`,
  type: 'xls',
  name: file.name,
},

添付が可能なファイルのmime typeは下記になります。

jpg
png
doc
docx
ppt
pptx
html
csv
pdf
vcard
json
zip
text
mp3
wav
aiff
flac
ogg
xls
xlsx
Mailer.mail(options, (error, event) => {})

メールアプリが起動された後、またアプリに戻る時実行されるコールバック関数(Callback function)を上で説明したオプションと一緒にMailer.mail関数に伝達します。

メールアプリが実行中発生したエラーやメールアプリで発生したイベントがパラメータ(Parameter)で伝達されて実行されます。

パラメータ(Parameter)で伝達されるeventは下記のようです。

sent
saved
cancelled
failed
error

エラーが発生したらerrorパラメータ(Parameter)にエラー内容が伝達されます。下記のコードは私たちが実際使ってるコードの一部です。

(error, event) => {
  if (error) {
    // エラーの処理
    ...
  } else if (event === 'sent') {
    // メール送信成功の処理
    ...
  }
}

完了

上で実装したreact-native-mail機能を実行したら下のような画面が見えます。(写真の出所: 公式サイト)

react-native-mailスクリンショット

参考

Buy me a coffeeBuy me a coffee
Posts