Share في React Native

مثال

مثال لمكون دالة (Function Component Example):

import React from 'react';
import { Share, View, Button } from 'react-native';

const ShareExample = () => {
  const onShare = async () => {
    try {
      const result = await Share.share({
        message:
          'React Native | A framework for building native apps using React',
      });
      if (result.action === Share.sharedAction) {
        if (result.activityType) {
          // shared with activity type of result.activityType
        } else {
          // shared
        }
      } else if (result.action === Share.dismissedAction) {
        // dismissed
      }
    } catch (error) {
      alert(error.message);
    }
  };
  return (
    <View style={{ marginTop: 50 }}>
      <Button onPress={onShare} title="Share" />
    </View>
  );
};

export default ShareExample;

مثال لمكون صنف (Class Component Example)

import React, { Component } from 'react';
import { Share, View, Button } from 'react-native';

class ShareExample extends Component {
  onShare = async () => {
    try {
      const result = await Share.share({
        message:
          'React Native | A framework for building native apps using React',
      });

      if (result.action === Share.sharedAction) {
        if (result.activityType) {
          // shared with activity type of result.activityType
        } else {
          // shared
        }
      } else if (result.action === Share.dismissedAction) {
        // dismissed
      }
    } catch (error) {
      alert(error.message);
    }
  };

  render() {
    return (
      <View style={{ marginTop: 50 }}>
        <Button onPress={this.onShare} title="Share" />
      </View>
    );
  }
}

export default ShareExample;

التّوابع

`share()‎`

static share(content, options)

يفتح هذا التابع مربّع حوارٍ لمشاركة محتوىً نصيٍّ، وعند استخدامه على المنصة iOS، فإنّه يُعيد وعدًا (Promise) يقبَل بواسطة كائنٍ يحوي مفتاحين action، وactivityType، إذا رفض المستخدم مربّع الحوار، فإن الوعد سيستدعى بجعل قيمة المفتاح action مساويةً لـ Share.dismissedAction، مع ترك بقية المفاتيح دون تعريفٍ، إلى جانب ملاحظة أن بعض خيارات المشاركة لن تظهر، أو لن تعمل عند العمل على محاكي iOS.

أما عند استخدامه على منصّة Android، فإنه يُعيد وعدًا يُقبل دائمًا بجعل قيمة المفتاح action مساويةً Share.sharedAction.

المحتوى (content)

message: الرّسالة المُراد مشاركتها.

على منصّة iOS

url: رابط (URL) المراد مشاركته، ويتطلّب رابطًا واحدًا، ورسالةً واحدةً على الأقلّ.

على منصّة Android

title: عنوان الرّسالة المُراد مشاركتها.

الخيارات (options)

على منصة iOS

subject: الموضوع المُراد مشاركته عبر البريد الالكتروني
excludedActivityTypes
tintColor

على منصّة Android

dialogTitle

`sharedAction`

static sharedAction

وتعني أنه قد تمّت مشاركة المحتوى بنجاحٍ.

`dismissedAction`

static dismissedAction

والمقصود بها أنه قد تم رفض صندوق الحوار هذا، ويُستخدم على منصّة iOS فقط.

مصادر

صفحة Share في توثيق React Native الرسميّ