الواجهة 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: الرّسالة المُراد مشاركتها. url: ( منصة iOS) رابط (URL) المراد مشاركته، ويتطلّب رابطًا واحدًا، ورسالةً واحدةً على الأقلّ. title: (منصة Android) عنوان الرّسالة المُراد مشاركتها.
options	كائن	لا	كائن فيه الخاصيات التالية: dialogTitle (منصة Android) subject: ( منصة iOS) الموضوع المُراد مشاركته عبر البريد الالكتروني excludedActivityTypes: ( منصة iOS) tintColor: ( منصة iOS)

الخاصيات

sharedAction

static sharedAction

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

dismissedAction

static dismissedAction

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

مصادر

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