1. 程式人生 > >React-Native呼叫系統分享元件Share元件的使用

React-Native呼叫系統分享元件Share元件的使用

title: React-Native呼叫系統分享Share元件的使用
tags: react-native

一. 方法

  • share
  • sharedAction
  • dismissedAction

二、具體說明

1.share
介面:
static share(content, options)

開啟一個分享文字內容的對話方塊

  • 在 iOS 中,返回一個 Promise,最終會解析為一個物件,包含有action和activityType兩個屬性。如果使用者取消對話方塊,則 Promise 仍將被解析,最終返回的action屬性會是Share.dismissedAction,而其他屬性為 undefined。
  • 在 Android 中同樣返回一個 Promise,但返回的action始終為Share.sharedAction。

In iOS, Returns a Promise which will be invoked an object containing action, activityType. If the user dismissed the dialog, the Promise will still be resolved with action being Share.dismissedAction and all the other keys being undefined.
In Android, Returns a Promise which always be resolved with action being Share.sharedAction.

Content引數說明
   - message - 要分享的訊息
   - title - 訊息的標題
   - url - 要分享的網址,(iOS系統中特有)

至少需要一個 url 和message。

options引數說明
ios
	- subject - 通過郵件分享的標題
	- excludedActivityTypes
	- tintColor
android
	- dialogTitle
2 sharedAction()
介面:
static sharedAction()

表示內容已成功分享。

3 dismissedAction()
介面:
static dismissedAction()

表示對話方塊被取消。僅限 iOS系統。

三. 效果如下所示

ios系統測試,調起系統分享

四、替代方案

我使用的rn版本是"react-native": “0.51.0”,在直接使用Share元件在android系統中,無法進行完成分享,每次分享都會出現無法獲取資源的問題,我在github中檢視Share元件issue的時候,看到最新.53.0版本已經支援在安卓平臺的使用,請後期使用支援正版,哈哈哈,由於自己專案原因,於我還是使用用了下面這個庫:
react-native-share
這個庫能夠完美的支援分享功能,其中包括字串分享、本地檔案分享(圖片、pdf等)、遠端檔案分享等功能.是一個很好的替代庫.
在使用分享檔案時,需要注意option的引數設定,否則會將檔案地址以字串的形式分享出去:

 const shareOptions = {
      title: "React Native",
      type: 'application/pdf',
      url: `data:application/pdf;base64,${PDF_BASE64}`,
      showAppsToView: true,
    }

如上面程式碼所示,分享pdf的時候,需要新增**type: ‘application/pdf’**欄位的值.url可以按照下面這種形式新增:

url: "file:///storage/emulated/0/demo/test.pdf"

至此完成分享功能的說明.