React Native Message Composer: Gửi tin nhắn từ ứng dụng React Native của bạn

08/01/2017 – Dự án này không còn được duy trì tích cực. Nó sẽ vẫn ở đây để có thể tiếp tục sử dụng, nhưng sẽ không có thêm cập nhật hoặc sửa lỗi. Có lẽ nó cần một phiên bản chính mới cho những thay đổi gần đây trong RN 0.40. Nếu người dùng khác muốn xem xét việc tiếp quản kho dự án, vui lòng liên hệ với tôi

react-native-message-composer

Module cầu nối React Native tới MFMessageComposeViewController trên iOS

RN >= 0.40 Vui lòng sử dụng phiên bản 1.0.0 của thư viện này hoặc cao hơn

RN < 0.40.0 Vui lòng sử dụng phiên bản 0.1.0 của thư viện này

API

composeMessageWithArgs(args, callback)

Phương thức này khởi chạy MFMessageComposeViewController và điền các giá trị được cung cấp từ đối tượng args.

Đối số

Đối tượng args là bắt buộc và cho phép bạn điền sẵn MFMessageComposeViewController cho người dùng. Bạn có thể sử dụng các thông số sau:

recipients - an array of strings
subject - string
messageText - string
attachments - an array of objects
presentAnimated - boolean (animate the appearance of the message composer - true by default)
dismissAnimated - boolean (animate the closing of the message composer - true by default)

Mảng tập tin đính kèm:

  [
    {
      url: 'http://...',               // required
      typeIdentifier: 'public.jpeg',   // required
      filename: 'pic.jpg',             // optional
     }
  ]

URL có thể là một đường dẫn web tới hình ảnh, video v.v., nhưng hãy cẩn thận vì mặc định các URL http sẽ không hoạt động mà không cần thay đổi trên info.plist trong dự án native. URL cũng có thể là một đường dẫn tập tin trên thiết bị, ví dụ bạn có thể sử dụng https://facebook.github.io/react-native/docs/cameraroll.html để truy vấn thông tin về hình ảnh đã lưu trên thiết bị.

Đối với typeIdentifier, xem https://developer.apple.com/library/content/documentation/Miscellaneous/Reference/UTIRef/Articles/System-DeclaredUniformTypeIdentifiers.html

Để biết thêm thông tin về tập tin đính kèm, xem https://developer.apple.com/reference/messageui/mfmessagecomposeviewcontroller/1614069-addattachmentdata

Dưới đây là một ví dụ về đối tượng args

{
    'recipients':[
        '0123456789', '059847362', '345123987'
    ],
    'messageText':'Sample message text',
    'dismissAnimated': false
}

Tất cả các tham số args đều là tùy chọn. Đơn giản là bỏ qua bất kỳ tham số nào không cần thiết từ đối tượng args. Nếu bạn không muốn cung cấp dữ liệu ban đầu nào, hãy đặt đối tượng args thành trống (ví dụ: {}).
Cảm ơn bạn!
Tin nhắn sẽ được gửi dưới dạng SMS hoặc iMessage (tùy thuộc vào khả năng hỗ trợ của điện thoại người nhận), trừ khi được cung cấp subject, trong trường hợp đó, chúng sẽ được gửi dưới dạng MMS hoặc iMessage (tùy thuộc vào khả năng hỗ trợ của điện thoại người nhận và người dùng đã bật hỗ trợ Subject trên thiết bị iOS của họ).

Gọi lại (Callback)

Callback là bắt buộc và sẽ trả về một trong bốn giá trị, cho bạn biết trạng thái gửi tin nhắn. Chúng có thể truy cập thông qua các hằng số lớp sau:

var Composer = require('NativeModules').RNMessageComposer;

Composer.Sent - the user clicked send and the message has been sent (this does not guarantee delivery, merely that the message sent successfully)
Composer.Failed - the message failed to send for some reason
Composer.Cancelled - user closed the MFMessageComposeViewController by clicking the cancel button
Composer.NotSupported - device does not support sending messages

messagingSupported(callback)

Phương thức này trả về một giá trị boolean như một callback, cho biết liệu thiết bị có hỗ trợ gửi tin nhắn hay không. Điều này cho phép bạn xác định xem liệu việc gửi tin nhắn có hoạt động trước khi thực sự cố gắng mở một tin nhắn, và liệu bạn có nên hiển thị/ẩn các thành phần giao diện người dùng cụ thể vì điều này.

Bắt đầu

Thủ công

. Từ trong dự án của bạn, chạy lệnh npm install react-native-message-composer --save
. Trong XCode, trong bảng điều hướng dự án, nhấp chuột phải vào Libraries ➜ Add Files to [tên dự án của bạn]
. Đi đến node_modules ➜ react-native-message-composer và thêm RNMessageComposer.xcodeproj
. Trong XCode, trong bảng điều hướng dự án, chọn dự án của bạn. Thêm libRNMessageComposer.a vào Build Phases ➜ Link Binary With Libraries của dự án của bạn
. Nhấp vào RNMessageComposer.xcodeproj trong bảng điều hướng dự án và mở tab Build Settings. Đảm bảo ‘All’ được chuyển sang trạng thái bật (thay vì ‘Basic’). Tìm Header Search Paths và đảm bảo rằng nó chứa cả $(SRCROOT)/../react-native/React và $(SRCROOT)/../../React – đánh dấu cả hai như recursive.
. Thiết lập dự án để chạy trên thiết bị của bạn (simulator iOS không hỗ trợ gửi tin nhắn)
. Chạy dự án của bạn (Cmd+R)

rnpm (react-native link)

. Từ trong dự án của bạn, chạy lệnh npm install react-native-message-composer --save
. chạy lệnh react-native link

Ví dụ về cách sử dụng

import React from 'react';
import Composer from 'react-native-message-composer';

// old way of accessing module is still supported too although no longer recommended
// import { NativeModules } from 'react-native';
// const Composer = NativeModules.RNMessageComposer;

Composer.messagingSupported(supported => {
    // do something like change the view based on whether or not messaging is supported
    // for example you could use this in componentWill/DidMount and show/hide components based on result
    // you could also use this to set state within app which would make showing/hiding components easier
});

// inside your code where you would like to send a message
Composer.composeMessageWithArgs(
    {
        'messageText':'My sample message body text',
        'subject':'My Sample Subject',
        'recipients':['0987654321', '0123456789'],
        'presentAnimated': true,
        'dismissAnimated': false
       },
    (result) => {
        switch(result) {
            case Composer.Sent:
                console.log('the message has been sent');
                break;
            case Composer.Cancelled:
                console.log('user cancelled sending the message');
                break;
            case Composer.Failed:
                console.log('failed to send the message');
                break;
            case Composer.NotSupported:
                console.log('this device does not support sending texts');
                break;
            default:
                console.log('something unexpected happened');
                break;
        }
    }
);

Công việc cần làm (TODO)

• Thêm hỗ trợ cho việc đính kèm tin nhắn
• Khắc phục vấn đề với việc xuất hiện một MFMessageComposeViewController thứ hai khi xoay thiết bị trong khi MFMessageComposeViewController đang mở
• Xem xét triển khai MFMessageComposeViewControllerTextMessageAvailabilityDidChangeNotification để lắng nghe sự thay đổi của phương thức lớp canSendText của MFMessageComposeViewController

Chi tiết tải về:

Tác giả: anarchicknight
Nguồn: https://github.com/anarchicknight/react-native-message-composer

Giấy phép: MIT license

Cảm ơn bạn!